javascript - 将 React 与工具创建的 SVG 一起使用

标签 javascript dom svg reactjs

我知道我可以像使用 HTML 一样将 React 与 SVG 一起使用。然而,复杂的 SVG 将在对 React 一无所知的外部工具(Inkscape、Illustrator 等)中创建。现在,我过去常常通过 .querySelector 的 JQuery 选择它们来操作 SVG 节点(您可以在 Inkscape 中提供节点 ID,这使得选择它们非常容易)并通过常规 DOM 操作应用转换/节点操作。

考虑到 React 的单向渲染方式和虚拟 DOM,我看不出这是如何实现的。由于复杂的 SVG 往往会不断变化,将 SVG 复制出来并在文本编辑器中对其进行操作是行不通的,因为设计师会希望在他最喜欢的 SVG 工具(肯定无法打开 JSX)中重新打开它们。

有没有一种方法可以将 Reacts 单向渲染与手动选择和转换真实 DOM 中的节点结合在一起?

最佳答案

用 SVG 解决这个工作流问题是我创建 https://www.npmjs.com/package/react-samy-svg 的主要动机.您可以使用一种方式进行声明式渲染,而无需粘贴 svg 代码。所以 svg 文件可以独立于它的转换而发展。希望对您有所帮助。

Here's an example on Glitch

关于javascript - 将 React 与工具创建的 SVG 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35477648/

相关文章:

javascript - 如果最终用户可以编写自己的 Javascript,他可以接触 SQL DB 吗?

javascript - 手动调用html5需要弹窗

javascript - SVG 在点击时显示文字描述

javascript - 在 safari 中使用 javascript 播放声音

javascript - 修改文件jquery.fancybox-1.3.4.js重写_draw函数,Jquery

javascript - 在 IE7+ 的动态样式表中添加 @import 语句

javascript - 为什么 Javascript 在有两个字符时只将回车符算作一个字符?

html - 防止格式错误的内容

javascript - 如何为 Web 和移动设备制作 SVG 响应式进度条?

javascript - 如何动态改变svg线的宽度