Question

我正在尝试将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过滤器的建议。

Answer 1

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

Answer 2

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

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

SVG过滤器无法在React中呈现

2 个答案: