SVG 动画

set

半径将在3秒后从25变成50。

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="25" style="fill:red;">
    <set attributeName="r" to="50" begin="3s" />
    Sorry, your browser does not support inline SVG.
  </circle>
</svg>

animate

<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" style="fill:red;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="8s"
      from="50"
      to="90%"
      repeatCount="indefinite" />
  </circle>
</svg>

在终点处结束动画

<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" style="fill:red;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="8s"
      from="50"
      to="90%"
      fill="freeze" />
  </circle>
</svg>

animateTransform

<svg width="200" height="180" xmlns="http://www.w3.org/2000/svg">
  <rect x="30" y="30" height="110" width="110" style="stroke:green;fill:red">
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="10s"
      type="rotate"
      from="0 85 85"
      to="360 85 85"
      repeatCount="indefinite" />
  </rect>
</svg>

animateMotion

<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
  <rect x="45" y="18" width="155" height="45" style="stroke:green;fill:none;">
    <animateMotion
      path="M0,0 q60,100 100,0 q60,-20 100,0"
      begin="0s"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
  <text x="50" y="50" style="font-family:Verdana;font-size:32">It's SVG!
    <animateMotion
      path="M0,0 q60,100 100,0 q60,-20 100,0"
      begin="0s"
      dur="10s"
      repeatCount="indefinite" />
</text>
</svg>