rotate
rotate 屬性指定了在 <animateMotion> 元素中定義的路徑上移動時，動畫元素的旋轉方式。
你可以將此屬性與以下 SVG 元素一起使用
用法說明
| 值 |
auto | auto-reverse | <number> |
|---|---|
| 預設值 | 0 |
| 可動畫的 | 否 |
auto 和 auto-reverse 值允許動畫元素的旋轉在其沿著路徑移動時動態改變。如果 rotate 的值為 auto，元素會轉向使其右側對準當前的運動方向。如果值為 auto-reverse，則會轉向使其左側對準當前的運動方向。
將 rotate 的值設定為一個數字，表示一個恆定的旋轉角度（以度為單位），這個角度不會隨著動畫而改變。預設值 0 保持動畫元素的原始方向。
示例
SVG
html
<svg
width="400"
height="120"
viewBox="0 0 480 120"
xmlns="http://www.w3.org/2000/svg">
<!-- Draw the outline of the motion path in grey -->
<path
d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey"
stroke-width="2"
fill="none"
id="theMotionPath" />
<!-- Red arrow which will not rotate -->
<path fill="red" d="M-5,-5 L10,0 -5,5 0,0 Z">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="0">
<mpath href="#theMotionPath" />
</animateMotion>
</path>
<g transform="translate(100, 0)">
<use href="#theMotionPath" />
<!-- Green arrow which will rotate along the motion path -->
<path fill="green" d="M-5,-5 L10,0 -5,5 0,0 Z">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath href="#theMotionPath" />
</animateMotion>
</path>
</g>
<g transform="translate(200, 0)">
<use href="#theMotionPath" />
<!-- Blue arrow which will rotate backwards along the motion path -->
<path fill="blue" d="M-5,-5 L10,0 -5,5 0,0 Z">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto-reverse">
<mpath href="#theMotionPath" />
</animateMotion>
</path>
</g>
<g transform="translate(300, 0)">
<use href="#theMotionPath" />
<!-- Purple arrow which will have a static rotation of 210 degrees -->
<path fill="purple" d="M-5,-5 L10,0 -5,5 0,0 Z">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="210">
<mpath href="#theMotionPath" />
</animateMotion>
</path>
</g>
</svg>
結果
規範
此特性似乎未在任何規範中定義。瀏覽器相容性
載入中…