SVG簡單動畫

十五樓亮哥發表於2015-01-30
SVG動畫

一：先來看效果


二：svg實現

<?xml version="1.0" encoding="UTF-8"?>


SVG Cartoon


三：程式碼說明

(1)animateTransform 元素是我們要為其製作動畫的物件（即 rect）的子物件，它將執行所有費力的工作


(2)因為方塊的中心與視區的原點重合（座標為 (400, 400)），所以方塊將繞其中心旋轉360 度

 from="0" to="360"表示旋轉的角度。 dur="5s" 表示旋轉的時間。


(3)  <line x1="-400" y1="0" x2="400" y2="0" style="stroke: black;" />  X軸線
    
      <line x1="0" y1="-400" x2="0" y2="400" style="stroke: black;" />    Y軸線

相關文章