SVG 过滤器无法在 React 中渲染答案

【问题标题】：SVG filter can't be rendered in ReactSVG 过滤器无法在 React 中渲染
【发布时间】：2016-09-07 13:19:28
【问题描述】：

我正在尝试将 SVG 过滤器（在本例中为 <feGaussianBlur>）加载到使用 React(15.0.1) 的 Web 应用程序中的图形元素 <rect>。代码看起来与此类似

在 component1.js 中：

render(){
   return(
      <defs>
        <filter id='blur'>
          <feGaussianBlur stdDeviation="5" />
        </filter>
      </defs>
      <component2 />
   );
}

在component2.js中：

render(){
  <rect x="some_xpos" 
        y="some_ypos"
        height="some_height"
        width="some_width"
        filter="url(#blur)" 
  >
  </rect>
}

所有这些组件都将在同一个 html 页面上呈现，但不知何故，当整个页面呈现时，过滤器并未应用。我研究了不同的选择：

option1 : 将 svg 过滤器导出到公共资产文件夹中自己的 .svg 文件，并使用公共 url 导出 url()。由于 Chrome 错误link 无法正常工作
option2 ：将<filter> 放在整个应用程序呈现的主要（也是唯一一个）index.html 文件中。我还把它放在最上面，用自己的<svg> 标签包裹起来。没用。

在我看来，<rect> 无法弄清楚过滤器在哪里。我将不胜感激有关如何调试此或替代加载 svg 过滤器的任何建议。

【问题讨论】：

如果你展示在一些服务上重现错误的测试用例会更好，比如 jsfiddle.net [jsfiddle.net/pmvo81ac]
感谢您的链接，将尝试复制它
我相信它是<component /> 中的小写c。与大写-C <Component />: jsfiddle.net/pmvo81ac/1 一起工作正常
我在我的应用上试过了，还是不行。不过谢谢你的建议。
我不知道react，但是看了github项目上关于xmlns属性的一些问题，看来你需要dangerouslySetInnerHTML。 github.com/facebook/react/issues/2250

标签： javascript html svg reactjs

【解决方案1】：

如果要直接在 DOM 中创建 SVG 元素，则必须在 SVG 命名空间中创建它们。从我所见，React 不支持这一点。正如 Kaiddo 在 cmets 中提到的那样，解决方法是将元素创建为原始的 innerHTML。

【讨论】：

【解决方案2】：

最好的解决方法是使用“样式”，如下所示：

<rect x="some_xpos" 
        y="some_ypos"
        height="some_height"
        width="some_width"
        style={ {filter: 'url(#blur)'} }
  >

【讨论】：