SVG里的几个实用动画元素的用法

因为刚刚接触svg，在w3school和菜鸟教程上面的简直是入门的入门，过于简洁，彻底不利于学习，因此不得不在网上找了一些文章和资料来看看，对于svg动画这部分彻底能够跟css3动画抗衡，如今整理一下，以备忘。

SVG中的几个用于动画的元素，它们分别是：
<animate>
<animateMotion>
<animateTransform>
<mpath>

一、<animate>

<animate>元素一般放置到一个SVG图像元素里面，用来定义这个图像元素的某个属性的动画变化过程。

attributeName="目标属性名称"
from="起始值"
to="结束值"
dur="持续时间"
repeatCount="动画时间将发生"

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

demo1

二、<animateMotion>

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

calcMode="动画的插补模式。能够是'discrete', 'linear', 'paced', 'spline'"
path="运动路径"
keyPoints="沿运动路径的对象目前时间应移动多远"
rotate="应用旋转变换"
xlink:href="一个URI引用<path>元素，它定义运动路径"

<?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- 
          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 xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

demo2

三、<animateTransform>

动画上一个目标元素变换属性，从而使动画控制平移，缩放，旋转或倾斜。

by="相对偏移值"
from="起始值"
to="结束值"
type="类型的转换其值是随时间变化。能够是 'translate', 'scale', 'rotate', 'skewX', 'skewY'"

<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"/>
    </polygon>
</svg>

demo3

四、<mpath>

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

参考文章
http://www.ziqiangxuetang.com...
http://www.webhek.com/request...