SVG 动画

望间2025年2月8日大约 2 分钟

SVG 动画分成两类:

基本动画(animate)
变形动画(animateTransform)
路径动画(animateMotion)

基本动画

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="5" width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite"
     />
  </rect>
</svg>

<rect width="10" height="10">
  <animate
    attributeName="rx"
    values="0;5;0"
    dur="10s"
    repeatCount="indefinite"
   />
</rect>

主要属性:

attributeName: 动画作用的属性名
from: 起始值
to: 结束值
values: 动画值，用分号(,)分隔
dur: 持续时间
repeatCount: 重复次数，indefinite 表示无限
begin: 开始时间
end: 结束时间
fill: 动画结束后，元素的状态:
- freeze: 保持动画结束时的状态
- remove: 移除动画,恢复到初始状态
calcMode: 动画片段的动画表现
- linear: 线性变化
- discrete: 离散变化
- paced: 均匀变化
- spline: 贝塞尔曲线变化
keyTimes: 关键帧时间，用分号(,)分隔
keySplines: 关键帧贝塞尔曲线，用分号(,)分隔

变形动画

<animate> 对 CSS 的 transform 属性不起作用，如果需要变形，就要使用 <animateTransform>。

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="5" width="10" height="10">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 15 10"
      to="360 15 10"
      dur="10s"
      repeatCount="indefinite"
     />
  </rect>
</svg>

<rect x="10" y="5" width="10" height="10">
  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0 15 10"
    to="360 15 10"
    dur="10s"
    repeatCount="indefinite"
   />
</rect>

主要属性:

type: 变形类型
其它属性和 <animate> 一样

路径动画

SVG 允许使用 <animateMotion> 让一个元素如何沿着运动路径进行移动。

相关信息

为了复用一个已经定义的路径，有必要使用一个 <mpath> 元素嵌入到 <animateMotion> 中，而不是使用 path。

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path id="path" fill="none" stroke="lightgrey" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite">
      <mpath xlink:href="#path" />
    </animateMotion>
  </circle>
</svg>

<path id="path" fill="none" stroke="lightgrey" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

<circle r="5" fill="red">
  <animateMotion dur="10s" repeatCount="indefinite">
    <mpath xlink:href="#path" />
  </animateMotion>
</circle>

主要属性:

path: 移动的路径
rotae: 动画元素移动时的旋转角度
- auto: 自动旋转，跟随路径的方向自动旋转
- auto-reverse: 自动旋转，跟随路径的方向自动旋转，并在到达终点时反向旋转
- number: 旋转角度，正值表示顺时针旋转，负值表示逆时针旋转
origin: 移动的原点
其它属性和 <animate> 一样