SVG 过滤器无法在 React 中渲染

Question

我正在尝试将 SVG 过滤器（在本例中）加载到使用 React(15.0.1) 的 Web 应用程序中的<feGaussianBlur>图形元素。<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 页面上呈现，但不知怎的，当整个页面呈现时，过滤器并未应用。我研究了不同的选择：

• 选项1：将 svg 过滤器导出到公共资产文件夹中自己的 .svg 文件，并url()使用公共 url。由于 Chrome 错误链接而无法使用
• option2 ：将其放入<filter> 整个应用程序呈现的主（也是唯一一个）index.html 文件中。我还将其放在最顶部，用自己的<svg>标签包裹起来。没用。

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

Answer 1

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