使用js/jQuery动画SVG路径

Animate SVG paths using js/jQuery

本文关键字：SVG 路径 动画 jQuery js 使用      更新时间：2023-09-26

我从adobe illustrator中输出了一个svg文件，这是伟大的，现在已经在我的html页面中嵌入了svg文件，svg包含了很多不同的路径，我想使用jquery单独动画，而不使用插件，但我不完全确定如何实现这一点，因为我不知道使用svg，有人能对这应该如何处理?

谢谢凯尔

jQuery与SVG API不兼容，但是普通JS可以很好地工作。

对于动画，你必须首先访问你的svg元素/对象。这要求从同一域提供SVG脚本。如何做到这一点可以在SO之前的答案中找到。

对于动画，你可以…

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

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

相关文章：