SVG 过滤器无法在 React 中渲染

Posted 2023-03-05

【中文标题】SVG 过滤器无法在 React 中渲染

【英文标题】：SVG filter can't be rendered in 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"
        
        
        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

【参考方案1】：

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

【参考方案2】：

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

<rect x="some_xpos" 
        y="some_ypos"
        
        
        style= filter: 'url(#blur)' 
  >