SVG的动画属性（动画常用属性、复合动画/往返动画/形变动画/路径动画/）

最新推荐文章于 2024-07-04 10:06:01 发布

lik-7

最新推荐文章于 2024-07-04 10:06:01 发布

阅读量1.5k

点赞数 2

分类专栏： svg 文章标签： html 动画

本文链接：https://blog.csdn.net/m0_68169119/article/details/125822620

版权

本文详细介绍了SVG中的三种动画标记：animate、animateTransform和animateMotion，以及关键的动画属性，如attributeType、attributeName、from/to、dur、fill等。通过具体的案例，如小球的往返动画、五角星的旋转动画和路径动画，展示了SVG动画的使用方法和效果，包括三角形变成长方形、小球消失和线条流动等。

摘要由CSDN通过智能技术生成

一、动画

1.SVG动画
在SVG中提供了三种常用动画标记
animate：基础动画
animateTransform：形变动画
animateMotion：路径动画
2.SVG动画属性
attributeType: CSS/XML 规定的属性值的名称空间
attributeName: 规定元素的哪个属性会产生动画效果
from/to: 从哪到哪
dur: 动画时长
fill: 动画结束之后的状态保持freeze结束状态/remove恢复初始状态（默认值）

3.SVG动画使用方式
3.1、创建动画, 告诉动画标记哪个元素需要执行动画（xlink:href="id名字"）

    <svg width="500" height="500">
        <circle id="myCircle" cx="200" cy="200" r="50" fill="red"></circle>
        <animate attributeName="r" from="50" to="200