CSS setting on <path> in SVG with ReactJS

Question

I have ReactJS component with < path > tag.I cannot set CSS property in this < path > tag. Main issue is, For my application i cannot wrap < div > tags in render() function. How to add CSS like back ground images in tag.

Answer 1

i would defer any live svg drawing to another library. Check out http://d3js.org or http://raphaeljs.com for excellent svg-based solutions. I have personally used the d3 lib with react and it works fine. You will simply need to defer event listening logic on your svgs to d3, but you can still use react to expose them to your component's lifecycle. i would definitely recommend d3js if you are doing anything complex with svg.

otherwise, if you are simply trying to load an svg as an image, you can do this:

<img src='path/to/svg.svg'/>

img tags support svgs in all major browsers, including most touch devices.