SVG rotate屬性用法及代碼示例

rotation屬性顯示動畫元素沿<animateMotion>元素中的指定路徑行進時的旋轉。

用法:

rotate = auto | auto-reverse | number

屬性值：rotation屬性接受上述和以下描述的值：

auto:該值使動畫元素的旋轉隨著路徑的移動而動態變化。在這種情況下，該元素在當前運動方向上與其right-hand側對齊。
auto-reverse:該值使動畫元素的旋轉隨著路徑的移動而動態變化。在這種情況下，該元素在當前運動方向上與其left-hand側對齊。
number:此值顯示恒定的旋轉，不會隨動畫而變化。

以下示例說明了rotate屬性的用法。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
   <body> 
       <div style="color:green;  
            margin-left:40px;"> 
  
          <h1>GeeksforGeeks</h1> 
           
          <h4 style="color:black;"> 
               When rotate = 0 & auto 
          </h4>  
            
          <svg width="400" height="120" 
               viewBox="0 0 380 120"
               xmlns="http://www.w3.org/2000/svg"> 
  
                <path d="M10,110 A120,120 -45 0, 
                         1 110 10 A120,120 -45 0, 
                         1 10,110" 
                         stroke="green" stroke-width="2" 
                         fill="none" id="geek"/> 
  
                <path fill="red" 
                      d="M-5,-5 L10,0 -5,5 0,0 Z">   
                      <animateMotion dur="6s" 
                        repeatCount="indefinite" 
                        rotate="0"> 
                        <mpath href="#geek"/> 
                      </animateMotion> 
                </path> 
                  
                <g transform="translate(100, 0)"> 
                   <use href="#geek"/> 
                   <path fill="green" 
                      d="M-5,-5 L10,0 -5,5 0,0 Z"> 
                      <animateMotion dur="6s" 
                        repeatCount="indefinite" 
                        rotate="auto"> 
                        <mpath href="#geek"/> 
                      </animateMotion> 
                   </path> 
                </g> 
              
            </svg> 
       </div>  
   </body> 
  
</html>

輸出：

HTML

<!DOCTYPE html> 
<html> 
  
   <body> 
       <div style="color:green;  
            margin-left:40px;"> 
  
          <h1>GeeksforGeeks</h1> 
           
         <h4 style="color:black;"> 
             When rotate = auto-revese & 200 
          </h4> 
            
          <svg width="600" height="120" 
               viewBox="50 0 480 120"
               xmlns="http://www.w3.org/2000/svg"> 
  
                <g> 
                   <path d="M10,110 A120,120 -45 0, 
                            1 110 10 A120,120 -45 0, 
                            1 10,110" 
                            stroke="green" stroke-width="2" 
                            fill="none" id="geek"/> 
  
                     <path fill="blue" 
                          d="M-5,-5 L10,0 -5,5 0,0 Z"> 
                          <animateMotion dur="6s" 
                             repeatCount="indefinite" 
                             rotate="auto-reverse"> 
                               <mpath href="#geek"/> 
                          </animateMotion> 
                     </path> 
                </g> 
                  
                <g transform="translate(100, 0)"> 
                    <path d="M10,110 A120,120 -45 0, 
                            1 110 10 A120,120 -45 0, 
                            1 10,110" 
                            stroke="green" stroke-width="2" 
                            fill="none" id="geek"/> 
  
                     <path fill="black" 
                          d="M-5,-5 L10,0 -5,5 0,0 Z"> 
                          <animateMotion dur="6s" 
                             repeatCount="indefinite" 
                             rotate="200"> 
                             <mpath href="#geek"/> 
                          </animateMotion> 
                         </path> 
                </g> 
  
            </svg> 
       </div>  
   </body> 
  
</html>

輸出：

相關用法

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