如何在 React 中渲染和编辑 SVG 数据？答案

【问题标题】：How do I render and edit SVG data in React?如何在 React 中渲染和编辑 SVG 数据？
【发布时间】：2020-07-23 00:36:40
【问题描述】：

假设我的数据库中有一个 SVG 文件：

<svg width="400" height="100"> 
  <rect width="400" height="100" 
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> 
</svg>

看起来像这样

在我的 React 代码中，我像这样获取 SVG 文件：

fetch('/api/picture')
  .then(res => res.json())
  .then(res => {
    this.setState({
      picture: res
    })
  })

所以现在在我的状态下，我有一个名为图片的变量，它的值是：

<svg width="400" height="100"> 
  <rect width="400" height="100" 
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> 
</svg>

经过一些研究，我发现渲染 SVG 的唯一方法是：

<div>
  <div dangerouslySetInnerHTML={{ __html: this.state.picture }}></div>
</div>

但我有点困惑这是否是首选和灵活的方式。如果我想在我的页面上有一个按钮，如果我点击它，圆圈会变成红色，我将如何使用我当前的代码来做到这一点？将另一个圆圈添加到 svg 的按钮怎么样？

我知道我必须以某种方式访问 rect 并更改样式，但我想不出我设置它的方式。

我尝试寻找解决方案，但似乎找不到，所以我的印象是我必须以不同的方式呈现我的 SVG。谁能帮我解决这个问题？谢谢

【问题讨论】：

react-svg 看起来是解决这个问题的好选择。如果您在编译过程中已经可以执行此操作，则另一种策略是将所有 SVG 转换为您可以导入的组件。查看svg-react-loader 或svgr

【解决方案1】：

我创建了https://github.com/hugozap/react-svgmt 以方便 SVG 加载和操作：

您可以从 url 或字符串加载 SVG 并使用 SvgProxy 来使用 CSS 选择器更新任何元素。

<SvgLoader width="100" height="100" path="/sample1.svg">
        <SvgProxy selector="rect" fill="red" />
</SvgLoader>

如果你有兴趣，我前段时间写了一篇关于它的文章

【讨论】：