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

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

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

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

 

元素的用法介绍

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

<code class="language-html"><?xml version="1.0"?>
<svg width="120" height="120" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" width="100" height="100">
        <animate attributetype="XML" attributename="x" from="-100" to="120" dur="10s" repeatcount="indefinite"></animate>
    </rect>

</svg></code>

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

 

元素的用法介绍

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

<code class="language-html"><?xml version="1.0"?>
<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- 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"></path>
    <circle cx="10" cy="110" r="3" fill="lightgrey"></circle>
    <circle cx="110" cy="10" r="3" fill="lightgrey"></circle>

    <!-- 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 xlink:href="#theMotionPath"></mpath>
        </animatemotion>
    </circle>
</svg></code>

 

用法介绍

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

<code class="language-html"><?xml version="1.0"?>
<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

    <polygon points="60,30 90,90 30,90">
        <animatetransform attributename="transform" attributetype="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"></animatetransform>
    </polygon>
</svg></code>

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

 

元素的用法介绍

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

<code class="language-html"><svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

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

  <!-- 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"></path>
  <circle cx="100" cy="250" r="17.64" fill="blue"></circle>
  <circle cx="250" cy="100" r="17.64" fill="blue"></circle>
  <circle cx="400" cy="250" r="17.64" fill="blue"></circle>

  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base 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 xlink:href="#path1"></mpath>
    </animatemotion>
  </path>
</svg></code>

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