SVG系列 — 动画元素<animate>

最新推荐文章于 2025-11-17 04:07:20 发布

原创最新推荐文章于 2025-11-17 04:07:20 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#svg #动画 #animate

svg 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了SVG中的<animate>标签及其属性，包括如何通过设置属性实现元素的变化，如位置移动和颜色变化等，并提供了具体的代码示例。

<animate>标签属性详解（参考MDN）

<animate>位于形状标签内部，用来定义此形状在某一时间点发生的某种变化。在持续时间里，由开始值过度到结束值。

1. 属性
attributeName     定义需要改变的属性名
attributeType     指定目标属性和它相对应的值处于哪个命名空间里   值 css | xml | auto
from
to
dur                   动画持续时间
repeatCount    动画发生次数   值 css | xml | auto
以上属于专有属性
values 对应attributeName需要改变的值的属性，具体可以参考以下两个例子：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <rect x="100" y="100" width="30" height="30" fill="green">
    <animate attributeType="XML"
      attributeName="y"
      from="50" to="100"
      dur="1s"  
      repeatCount="indefinite"/>
  </rect>
  <circle cx="240" cy="100" r="50" fill="#2315ff">
     <animate attributeType="CSS" 
        attributeName="fill" 
        values="orange;#4ed8a1;#a2d8d5" 
        dur="5s" 
        repeatCount="indefinite"/>
    </circle>
</svg>