无法在React中呈现SVG过滤器

我尝试在使用React（15.0.1）的Web应用程序中将图形元素<rect>加载到SVG过滤器（本例中为<feGaussianBlur>）。该代码类似于此无法在React中呈现SVG过滤器

东西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：在使用公共URL导出SVG滤镜自身的.svg文件在公共资源文件夹和url()。由于Chrome浏览器问题导致无法工作link
option2：将<filter>放在整个应用呈现的主要（且唯一一个）index.html文件中。我还把它放在了顶部，上面有自己的<svg>标签。没有工作。

在我看来，<rect>找不出过滤器在哪里。我将不胜感激任何意见，如何调试这个或替代加载svg过滤器。

来源

2016-05-11 Ken Liao

这将是更好，如果你表明再现像jsfiddle.net某些航线上的错误测试用例[https：//开头的jsfiddle。 net/pmvo81ac /] –

感谢您的链接，将尝试重新制作 –

我相信这是''中的小写'c'。适用于大写字母C''：https://jsfiddle.net/pmvo81ac/1/ – pawel

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

来源

2016-10-06 00:55:49

-1

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

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

来源

2016-10-06 13:27:33 Beuun

无法在React中呈现SVG过滤器

回答

相关问题