移动形状时未正确应用 SVG 动画

Question

我正在尝试将 SVG 动画应用于移动 (100, 100) 像素的三角形：

<svg width="800" height="600">
    <polyline shapeId="triangle" fill="transparent" stroke="gray" points="0,0 52.5,160 105,0 0,0 " transform=" translate(100 100)">
    </polyline>
</svg>

我原以为三角形会围绕点 (100, 100) 旋转。但是，三角形围绕 SVG 文档的原点旋转：

<svg width="800" height="600">
    <polyline shapeId="triangle" fill="transparent" stroke="gray" points="0,0 52.5,160 105,0 0,0 " transform=" translate(100 100)">
      <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" repeatCount="indefinite" from="0" to="360"/>
    </polyline>
</svg>

如果我在动画标签中指定了旋转偏移，结果仍然不是我所期望的：三角形不围绕它的一个角旋转。

    <svg width="800" height="600">
        <polyline shapeId="triangle" fill="transparent" stroke="gray" points="0,0 52.5,160 105,0 0,0 " transform=" translate(100 100)">
          <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" repeatCount="indefinite" from="0 100 100" to="360 100 100"/>
        </polyline>
    </svg>

我想要实现的是三角形在移动 (100, 100) 像素的同时围绕其中一个角旋转。

我怎样才能做到这一点？谢谢。

Answer 1

您始终可以转换父元素...

<svg width="800" height="600">
<g transform="translate(100 100)">
    <polyline shapeId="triangle" fill="transparent" stroke="gray" points="0,0 52.5,160 105,0 0,0 " >
      <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" repeatCount="indefinite" from="0" to="360"/>
    </polyline>
</g>
</svg>

移动形状时未正确应用 SVG 动画

SVG animation is not applied properly when a shape is moved

animation

svg

svg-animate