使用 ReactJS 在 SVG 中的 <path> 上的 CSS 设置

【问题标题】：CSS setting on <path> in SVG with ReactJS使用 ReactJS 在 SVG 中的 <path> 上的 CSS 设置
【发布时间】：2015-09-09 13:46:00
【问题描述】：

我有带有标签的 ReactJS 组件。我无法在这个标签中设置 CSS 属性。主要问题是，对于我的应用程序，我无法在 render() 函数中包装标签。如何在标签中添加类似背景图像的 CSS。

【问题讨论】：

一个 SVG <path> 标签不能有背景图片。

标签： javascript svg reactjs reactjs-flux

【解决方案1】：

我会将任何实时 svg 绘图推迟到另一个库。查看 http://d3js.org 或 http://raphaeljs.com 以获得出色的基于 svg 的解决方案。我亲自使用了 d3 lib 和 react，它工作正常。您只需将 svgs 上的事件监听逻辑推迟到 d3，但您仍然可以使用 react 将它们暴露给组件的生命周期。如果您使用 svg 做任何复杂的事情，我肯定会推荐 d3js。

否则，如果您只是尝试将 svg 加载为图像，则可以这样做：

<img src='path/to/svg.svg'/>

img 标签在所有主流浏览器中都支持 svg，包括大多数触控设备。

【讨论】：