在React组件中嵌入动画SVG

Question

我正在玩装载图像并找到SvgCircus - 基本上它可以让你开发动画SVG。 Here's我生成的一个例子。

如果我只是将这个svg放在我的index.html中就行了。但是，如果我尝试在React组件中使用它，我只能加载静态图像 - 没有动画。我尝试使用span中的dangerouslySetInnerHTML参数来加载原始字符串和<use xlinkHref={filename}></use>，但这两个参数都会加载静态图像。我是React的新手，但最好的猜测是svg文件附带的javascript未加载。

我有一个解决方法 - 将完整的svg放在我的index.html上，以便它加载到页面加载和display: none它，然后在它使用时显示它。我想知道我是否忽略了任何东西，或者是否有更优雅的解决方案。

Answer 1

当你在反应组件中包含html时，它不是100％html。你需要在驼峰的情况下重写DOM属性，例如stroke-opacity将是strokeOpacity。

我认为这会导致动画问题。