javascript - SVG 过滤器无法在 React 中渲染

Question

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

在 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 页面上呈现，但不知怎的，当整个页面呈现时，过滤器并未应用。我研究了不同的选择:

• 选项1:将 svg 过滤器导出到公共(public) Assets 文件夹中其自己的 .svg 文件和 url()使用公共(public)网址。由于 Chrome 错误而无法工作 link
• 选项2:输入<filter>在渲染整个应用程序的主(也是唯一一个)index.html 文件中。我还将它放在最顶部，用它自己的 <svg> 包裹起来。标签。没有成功。

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

Answer 1

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