javascript – 在React.js中使用SVG过滤器属性

前端之家收集整理的这篇文章主要介绍了javascript – 在React.js中使用SVG过滤器属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我一直在研究SVG和React的数据表示,它们看起来非常合适.但是React尚不支持SVG,并且https://github.com/facebook/react/issues/2250还不存在插件.

然而,有一些解决方法,比如对某些元素使用dangerouslySetInnerHTML,在我的情况下我还找不到一个.

我想在circle svg元素中使用filter属性.但是它没有被渲染到DOM中.这是我的React组件:

class DeviceDot extends React.Component {
  render () {
    const { app,idx } = this.props

    return  

和过滤器:

class FilterSVG extends React.Component {
  render () {
    const { app,idx } = this.props
    const icon = app ? `/api/apps/${app}/logo` : '/img/dflt.png'

    return (
      

但是我不能在不包装这个组件的情况下使用dangerouslySetInnerHTML,我想按原样重用它(一个圆形的SVG元素).是否有任何解决方法可以使用您现在使用的此属性(以及其他属性)?

谢谢.

最佳答案
对于过滤器,您可以使用CSS样式作为解决方法,如下所示:

const style = {
  filter: `url(#${app || 'default'})`
}

而返回的组件……

return< circle cx = {50 * idx} cy = {50 * idx} r ='25'style = {style} />

如果您只想过滤,可以使用纯CSS.因此,将它添加到React道具.

猜你在找的JavaScript相关文章