在React组件中嵌入动画SVG

Question

我正在玩图片加载和发现SvgCircus - 基本上它可以让你开发动画SVG。 Here's我生成的一个示例。

如果我只是把这个svg放在我的index.html中，它可以正常工作。但是，如果我尝试在React组件中使用它，我只能得到静态图像加载 - 没有动画。我尝试过使用跨度中的dangerouslySetInnerHTML参数来加载原始字符串，并使用<use xlinkHref={filename}></use>，但这两个都加载静态图像。我对React是新手，但我最好的猜测是svg文件附带的JavaScript未加载。

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

Answer 1

当您在反应组件中包含html时，它不是100％html。您需要在骆驼案例中重写DOM属性，例如stroke-opacity将是strokeOpacity。

我想这会导致动画问题。