SVG-animation(二)

昨天介紹了animate這個動畫元素，沒看過看這裡
今天要來介紹剩下的animateTransform和animateMotion～

animateTransform

animateTransform可以讓元素產生形變動畫

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="10" fill="red">
    <animateTransform dur="3s" attributeName="transform" repeatCount="indefinite" type="scale" from="1" to="2">
  </circle>
</svg>

animateMotion

animateMotion可以讓元素沿著路徑方向移動，一樣包在要使用的元素裡面，設置dur持續時間，接著設置屬性path的移動路徑，另外如果設定了移動路徑，移動元素x,y=(0,0)即是路徑Ｍ起始點

如下範例，圓的圓心就是M(100,100)

<svg width="1000px" height="1000px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M100 100  Q150 150 ,200 100 T300 100" stroke="black" fill="transparent"/>
  <circle cx="0" cy="0" r="10" fill="red">
    <animateMotion dur="1s" path="M100 100  Q150 150 ,200 100 T300 100" repeatCount="indefinite" rotate="auto">
  </circle>
</svg>

～SVG龜速學習中，如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://developer.mozilla.org/zh-CN/docs/Web/SVG/SVG_animation_with_SMIL
[2]https://www.oxxostudio.tw/articles/201409/svg-21-smil-animation.html
[3]四個 SVG 動畫應用範例