Question

每当我把＆＃34; rotate =＆＃34; auto＆＃34;或＆＃34; rotate =＆＃34;自动反转＆＃34;这个矩形在整个地方混乱地飞舞。我该如何解决这个问题？

＆＃13;

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

＆＃13;

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>

这也意味着rect的中心跟随你的运动路径，并且没有偏移（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>

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

1 个答案: