javascript - 使用 js/jQuery 动画 SVG 路径

Question

我从 adobe illustrator 输出了一个很棒的 svg 文件，现在已经将该 svg 文件嵌入到我的 html 页面中，svg 包含许多不同的路径，我想使用 jquery 单独制作动画而不使用插件，但我不完全确定如何实现这一点，因为我不知道如何使用 svg，任何人都可以阐明应该如何处理这个问题吗？

谢谢凯尔

Answer 1

jQuery 与 SVG API 不兼容，但 vanilla JS 运行良好。

对于动画，您必须首先访问您的 svg 元素/对象。这要求 SVG 脚本来自同一个域。如何做到这一点可以在之前关于 SO 的回答中找到。

对于动画你可以...

• 创建 SVG 动画元素，将它们添加到 SVG DOM 并将它们绑定(bind)到您的路径/元素。参见 http://www.w3.org/TR/SVG/animate.html .

• 通过直接更改所有元素拥有的矩阵以编程方式执行此操作。参见 http://www.w3.org/TR/SVG/coords.html