SVG系列 — 動畫元素

<animate>標籤屬性詳解（參考MDN）

---

<animate>位於形狀標籤內部，用來定義此形狀在某一時間點發生的某種變化。在持續時間裏，由開始值過度到結束值。

1. 屬性
attributeName     定義需要改變的屬性名
attributeType     指定目標屬性和它相對應的值處於哪個命名空間裏   值 css | xml | auto
from
to
dur                   動畫持續時間
repeatCount    動畫發生次數   值 css | xml | auto
以上屬於專有屬性
values 對應attributeName需要改變的值的屬性，具體可以參考以下兩個例子：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <rect x="100" y="100" width="30" height="30" fill="green">
    <animate attributeType="XML"
      attributeName="y"
      from="50" to="100"
      dur="1s"  
      repeatCount="indefinite"/>
  </rect>
  <circle cx="240" cy="100" r="50" fill="#2315ff">
     <animate attributeType="CSS" 
        attributeName="fill" 
        values="orange;#4ed8a1;#a2d8d5" 
        dur="5s" 
        repeatCount="indefinite"/>
    </circle>
</svg>