时间戳

首页 > 解决方案 > 移动形状时未正确应用 SVG 动画

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

问题描述

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

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

标签： animationsvgsvg-animate

解决方案

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

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

推荐阅读