SMIL 動態控制

SVG <animate>的動態控制屬性

結束後保持變化後的狀態 fill=”freeze”

效果類似animation-fill-mode: forwards;

svg(viewbox="-50 -50 100 100")
 circle(cx=0,cy=0,r=10)
  animate(attributeName="r" dur="5s" values="10;40" fill="freeze")
svg
 width: 240px
 border: solid 2px

JS控制動畫開始

  1. 用參數控制SVG動畫一開始先停止
  2. 用JS method喚醒動畫
svg(viewbox="-50 -50 100 100")
 circle(cx=0,cy=0,r=10)
  animate#myAni(attributeName="r" dur="2s" values="10;30;10" begin="infinite" repeatCount="indefinite")
button(onclick="myAni.beginElement()") click me
svg
 width: 240px
 border: solid 2px

Safari bug：transform-origin不會生效

若使用CSS Animation Keyframes設定動畫的話，則transform-origin可以在safari正常使用的，
但在SMIL設定<animate>，則safari的transform-origin屬性不知為何沒有作用，會造成動畫扭曲