Embedding animated SVG in React Component

Question

I was playing around with loading images and found SvgCircus - basically it lets you develop animated SVGs. Here's an example of one I generated.

If I simply put this svg in my index.html it works fine. However if I try to use it in a React component I can only get the static image to load - no animation. I tried this using the dangerouslySetInnerHTML parameter in a span to load the raw string, and <use xlinkHref={filename}></use> , but both of these load the static image. I am new to React but my best guess is that the javascript that comes with the svg file is not loaded.

I have a work around - put the full svg on my index.html so it loads on page load and display: none it, and then when it is time to use it show it. I was wondering if I am overlooking anything or if there is a more elegant solution.

Answer 1

When you include html in react components, it is not 100% html. You need to rewrite DOM attributes in camel case eg stroke-opacity would be strokeOpacity .

I would think this would cause the animation issue.