SVG里的几个动画元素的用法介绍

VG是英文Scalable Vector Graphics的缩写，意为可缩放矢量图形。随着浏览器技术的进步，SVG在网页上的运用越来越多。SVG有很多优点，比如体积小、缩放时不失真、可以动态的改变，适合制作动画、格式可读，易于使用，搜索引擎优化等。

SVG在动画方面的表现格外优秀，本文主要是介绍SVG中的几个用于动画的元素，它们分别是：

1. <animate>
2. <animateMotion>
3. <animateTransform>
4. <mpath>

我将用具有坚定的演示里让大家明白这几个元素的具体用法。

<animate>元素的用法介绍

<animate>元素通常放置到一个SVG图像元素里面，用来定义这个图像元素的某个属性的动画变化过程。我们需要制定动画的持续时间，以及属性值的初始值和变化后的值。

<?  version=\"1.0\"?>
<svg width=\"120\" height=\"120\" 
     viewPort=\"0 0 120 120\" version=\"1.1\"
      ns=\"http://www.w3.org/2000/svg\">
	
    <rect x=\"10\" y=\"10\" width=\"100\" height=\"100\">
        <animate attributeType=\" \"
                 attributeName=\"x\"
                 from=\"-100\" to=\"120\"
                 dur=\"10s\"
                 repeatCount=\"indefinite\"/>
    </rect>
	
</svg>

其中repeatCount属性的取值可以是一数字，也可以是“indefinite”，意为无限循环。

<animateMotion>元素的用法介绍

<animateMotion>元素也是放置一个图像元素里面，它可以引用一个事先定义好的动画路径，让图像元素按路径定义的方式运动。

<?  version=\"1.0\"?>
<svg width=\"120\" height=\"120\"  viewBox=\"0 0 120 120\"
      ns=\"http://www.w3.org/2000/svg\" version=\"1.1\"
      ns:x =\"http://www.w3.org/1999/x \" >

    <!-- Draw the outline of the motion path in grey, along
         with 2 small circles at key points -->
    <path d=\"M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110\"
          stroke=\"lightgrey\" stroke-width=\"2\" 
          fill=\"none\" id=\"theMotionPath\"/>
    <circle cx=\"10\" cy=\"110\" r=\"3\" fill=\"lightgrey\"  />
    <circle cx=\"110\" cy=\"10\" r=\"3\" fill=\"lightgrey\"  />

    <!-- Here is a red circle which will be moved along the motion path. -->
    <circle cx=\"\" cy=\"\" r=\"5\" fill=\"red\">

        <!-- Define the motion path animation -->
        <animateMotion dur=\"6s\" repeatCount=\"indefinite\">
           <mpath x :href=\"#theMotionPath\"/>
        </animateMotion>
    </circle>
</svg>

<animateTransform>用法介绍

<animateTransform>元素对图形的运动和变换有更多的控制，它可以指定图形的变换、缩放、旋转和扭曲等。

<?  version=\"1.0\"?>
<svg width=\"120\" height=\"120\"  viewBox=\"0 0 120 120\"
      ns=\"http://www.w3.org/2000/svg\" version=\"1.1\"
      ns:x =\"http://www.w3.org/1999/x \" >

    <polygon points=\"60,30 90,90 30,90\">
        <animateTransform attributeName=\"transform\"
                          attributeType=\" \"
                          type=\"rotate\"
                          from=\"0 60 70\"
                          to=\"360 60 70\"
                          dur=\"10s\"
                          repeatCount=\"indefinite\"/>
    </polygon>
</svg>

其中type属性的取值可以是translate | scale | rotate | skewX | skewY等。

<mpath>元素的用法介绍

<mpath>元素的用法在上面的例子里出现过，它是一个辅助元素，通过它，<animateMotion>等元素可以引用一个外部的定义的<path>。让图像元素按这个<path>轨迹运动。

<svg width=\"100%\" height=\"100%\"  viewBox=\"0 0 500 300\"
      ns=\"http://www.w3.org/2000/svg\"
      ns:x =\"http://www.w3.org/1999/x \" >

  <rect x=\"1\" y=\"1\" width=\"498\" height=\"298\"
        fill=\"none\" stroke=\"blue\" stroke-width=\"2\" />

  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <path id=\"path1\" d=\"M100,250 C 100,50 400,50 400,250\"
        fill=\"none\" stroke=\"blue\" stroke-width=\"7.06\"  />
  <circle cx=\"100\" cy=\"250\" r=\"17.64\" fill=\"blue\"  />
  <circle cx=\"250\" cy=\"100\" r=\"17.64\" fill=\"blue\"  />
  <circle cx=\"400\" cy=\"250\" r=\"17.64\" fill=\"blue\"  />

  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the   of
       the triangle centered horizontally just above the origin. -->
  <path d=\"M-25,-12.5 L25,-12.5 L 0,-87.5 z\"
        fill=\"yellow\" stroke=\"red\" stroke-width=\"7.06\"  >
    <!-- Define the motion path animation -->
    <animateMotion dur=\"6s\" repeatCount=\"indefinite\" rotate=\"auto\" >
       <mpath x :href=\"#path1\"/>
    </animateMotion>
  </path>
</svg>

上面这些演示了用到的只是一些常用的属性，这些元素里还有很多复杂的用法和各种各样的属性。以后会慢慢介绍给大家。