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

编程问答 2022-05-08

问题描述

我正在尝试将 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 " 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 " 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) 像素的同时围绕其角旋转的三角形。

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

解决方法

你总是可以转换一个父元素...

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

animationanimationsvgsvg-animate