I have been researching a bit on data representation with SVG and React and they seem a perfect fit. However SVG is not yet supported in React, and an addon does not exist yet .

Yet there is some workarounds like using dangerouslySetInnerHTML for some elements, in my case I cannot find one yet.

I want to use filter attribute inside a circle svg element. However It gets not rendered into the DOM. Here it is my React Component:

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

    return  <circle cx={50 * idx} cy={50 * idx} r='25' filter={`url(#${app})`} fill='mediumorchid' />
  }
}

And the filter:

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

    return (
      <filter id={app || 'default'} x='0%' y='0%' width='100%' height='100%'>
        <feImage xlinkHref={icon} />
      </filter>
    )
  }
}

However I cannot use dangerouslySetInnerHTML without wrapping this ponent, which I want to reuse as is (a circle SVG element). Is there any work around to use this attribute (and others) you are using right now?

Thank you.

I have been researching a bit on data representation with SVG and React and they seem a perfect fit. However SVG is not yet supported in React, and an addon does not exist yet https://github./facebook/react/issues/2250.

Yet there is some workarounds like using dangerouslySetInnerHTML for some elements, in my case I cannot find one yet.

I want to use filter attribute inside a circle svg element. However It gets not rendered into the DOM. Here it is my React Component:

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

    return  <circle cx={50 * idx} cy={50 * idx} r='25' filter={`url(#${app})`} fill='mediumorchid' />
  }
}

And the filter:

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

    return (
      <filter id={app || 'default'} x='0%' y='0%' width='100%' height='100%'>
        <feImage xlinkHref={icon} />
      </filter>
    )
  }
}

However I cannot use dangerouslySetInnerHTML without wrapping this ponent, which I want to reuse as is (a circle SVG element). Is there any work around to use this attribute (and others) you are using right now?

Thank you.

• javascript
• svg
• reactjs

Share Improve this question Follow edited Mar 1, 2016 at 11:43 jsdario asked Mar 1, 2016 at 9:59 jsdariojsdario 6,8731111 gold badges4444 silver badges7878 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

For filter you can use CSS styles as workaround, like this:

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

And the returning ponent...

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

If you only want to filter you can use plain CSS. Thus, add it to React props.

React does support SVG. The issue you've linked to has been fixed. In some cases the JSX attribute will be different to the HTML attribute, e.g. xlinkHref instead of xlink:href. It should not be necessary to use dangerouslySetInnerHTML.

In the code above, it looks as if you're simply using the wrong variable. You want this instead:

filter={`url(#${icon})`}