javascript - 在 React Component 中嵌入动画 SVG

Question

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

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

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

Answer 1

当你在 React 组件中包含 html 时，它不是 100% html。您需要用驼峰式大小写重写 DOM 属性，例如stroke-opacity 将是 strokeOpacity。

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