Gauss Zhou

# SVG 动画

# 动画 animate

<animate>标签用于产生动画效果。

<svg width="310" height="100" style="border:1px solid">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="width" from="0" to="300" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>
  
<svg width="310" height="100" style="border:1px solid">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="x" from="-100" to="300" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

上面代码中，矩形会不断移动，产生动画效果。

<animate>的属性含义如下。

  • attributeName：发生动画效果的属性名。
  • from：单次动画的初始值。
  • to：单次动画的结束值。
  • dur：单次动画的持续时间。
  • repeatCount：动画的循环模式。

# 动画 animateTransform

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

<svg width="120" height="120"  viewBox="0 0 120 120" style="border:1px solid">
    <polygon points="30,30 90,30 90,90 30,90" fill="#4bc0c8">
           <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 60"
                          to="360 60 60"
                          dur="10s"
                          repeatCount="indefinite"/>
    </polygon>
</svg>

上面代码中，<animateTransform>的效果为旋转(rotate)。

这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。

  • from="0 60 70"表示开始时，角度为 0，围绕(200, 200)开始旋转
  • to="360 60 70"表示结束时，角度为 360，围绕(400, 400)旋转。

类似css的transform-origin和@keyframes动画

# 动画 animateMotion

<animateMotion> 元素定义了一个元素如何沿着运动路径进行移动。

mpath

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

<svg width="310" height="155" viewBox="0 0 200 100" style="border:1px solid">
  <path id="path1" 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="#path1"/>
    </animateMotion>
  </circle>
</svg>

动画 animate
动画 animateTransform
动画 animateMotion