SVG <animateTransform>用法及代碼示例

SVG代表可縮放矢量圖形。它定義了基於矢量的圖形和動畫，就像在HTML Canvas中一樣。

animateTransform元素在其目標元素上設置轉換屬性的動畫，從而允許動畫控製平移，縮放，旋轉和/或傾斜。

用法:

<animateTransform attributeName=''transform''/>

屬性：

from:在動畫期間將修改的屬性的初始值。
to:在動畫期間將修改的屬性的最終值。
type:它定義了轉換的類型，其值隨時間變化。
dur:動畫的持續時間。
repeatCount:動畫發生的次數。
repeatDur:重複播放動畫的總時間。
attributeName:將被動畫化的CSS屬性的名稱。

例：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="120" height="120"> 
  
        <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> 
</body> 
  
</html>

支持的瀏覽器：

Chrome
Edge
Firefox
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自rbbansal大神的英文原創作品 SVG <animateTransform> Element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。