SVG里的幾個實用動畫元素的用法

由於剛剛接觸svg，在w3school和菜鳥教程上面的簡直是入門的入門，過於簡潔，完全不利於學習，所以不得不在網上找了一些文章和資料來看看，對於svg動畫這部分完全可以跟css3動畫抗衡，現在整理一下，以備忘。

SVG中的幾個用於動畫的元素，它們分別是：
<animate>
<animateMotion>
<animateTransform>
<mpath>

1、<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

2、<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

3、<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

4、<mpath>

在上面的例子里出現過，它是一個輔助元素，通過它，<animateMotion>等元素可以引用一個外部的定義的<path>。讓圖像元素按這個<path>軌跡運動。

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