我在加载图片时发现了 SvgCircus - 基本上它可以让你开发动画 SVG。 Here's我生成的示例。
如果我只是将这个 svg 放在我的 index.html 中,它就可以正常工作。但是,如果我尝试在 React 组件中使用它,我只能加载静态图像——没有动画。我尝试使用 dangerouslySetInnerHTML
用于加载原始字符串的跨度参数,以及 <use xlinkHref={filename}></use>
,但是这两个加载静态图像。我是 React 的新手,但我最好的猜测是 svg
附带的 javascript文件未加载。
我有一个解决方法 - 将完整的 svg 放在我的 index.html 上,以便它在页面加载和 display: none
上加载它,然后在需要使用它的时候显示它。我想知道我是否忽略了什么或者是否有更优雅的解决方案。
最佳答案
当你在 React 组件中包含 html 时,它不是 100% html。您需要用驼峰式大小写重写 DOM 属性,例如stroke-opacity
将是 strokeOpacity
。
我认为这会导致动画问题。
关于javascript - 在 React Component 中嵌入动画 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37397778/