如何正确设置元素沿运动路径的方向？

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>移动到原点，以便围绕矩形中的点进行旋转。

<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>