モーションパスに沿って要素の向きを適切に設定するにはどうすればよいですか？

Question

"rotate =" auto "または" rotate = "auto-reverse"を置くたびに、四角形がどこにでもカオス的に飛んでいます。どうすれば修正できますか？

<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>を原点に移動することで、回転が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>