如何正確設置元素沿運動路徑的方向？

Question

每當我把「旋轉=」自動「或」旋轉=「自動反向」矩形在整個地方亂飛亂舞。我該如何解決這個問題？

<svg width="800" height="600"> 
 
    <rect x="200" y="300" width="40" height="15" fill="black"> 
 
    <animateMotion dur="3s" repeatCount="indefinite" 
 
    rotate="auto" 
 
    path="M200,0 m-200,0 a200,200 0 1,0 400,0 a200,200 0 1,0 -400,0" /> </rect> 
 
</svg>

Answer 1

的問題是，SVG的起源，從而<rect>的是（0,0） - 左上角。當您開啓自動旋轉功能時，矩形將圍繞該原點擺動，同時也跟隨運動路徑。

解決方案是將<rect>移動到原點，以便旋轉發生在矩形中的某個點的周圍。

<svg width="800" height="600"> 
 
    <rect x="0" y="0" width="40" height="15" fill="black"> 
 
    <animateMotion dur="3s" repeatCount="indefinite" 
 
     rotate="auto" 
 
     path="M200,0 m-200,0 a200,200 0 1,0 400,0 a200,200 0 1,0 -400,0" /> 
 
    </rect> 
 
</svg>

這也意味着，在矩形的中心以下的運動路徑，並且它不偏移（用x = 「200」 y = 「300」）。

當然，這意味着這個動作不在你想要的位置。一般來說，最好的解決方案是將兩個元素都包含在一個組中（<g>）元素，該元素將所有內容都轉移到所需的位置，其格式爲transform。

<svg width="800" height="600"> 
 
    <g transform="translate(200,300)"> 
 
    <rect x="0" y="0" width="40" height="15" fill="black"> 
 
     <animateMotion dur="3s" repeatCount="indefinite" 
 
     rotate="auto" 
 
     path="M200,0 m-200,0 a200,200 0 1,0 400,0 a200,200 0 1,0 -400,0" /> 
 
    </rect> 
 
    </g> 
 
</svg>