如何将这个动画的 svg 替换为仅绘制多边形的 svg

Question

我敢肯定，对于了解 svg 的人来说，这是一个简单的问题，但是，那不是我，我正在转换一个使用 svg 且无权访问的现有程序原程序员请教。

我有以下函数可以渲染多边形并每秒旋转一次。我希望它只渲染原始多边形并停止。如果我完全删除 animateTranform 元素，我会得到矢量，但不会设置到我想要的位置（以度为单位）。我可以将 to= 行更改为只包含 +0 而不是 +360 但这看起来很奇怪。

如果有人可以建议如何使它更简单且不动，我将不胜感激。谢谢

export function SecondsArrow({deg}) {
    return <polygon points="25,26 25,22" className="Clock__seconds">

        <animateTransform
          attributeName="transform"
          begin="0s"
          dur="60s"
          type="rotate"
          from={`${deg} 25 25`}
          to={`${deg + 360} 25 25`}
          repeatCount="indefinite"
        />

    </polygon>
}

Answer 1

如果要保持箭头指向的方向为 deg，请在多边形中包含一个 transform="rotate(${deg} 25 25)" 属性。

export function SecondsArrow({deg}) {
    return <polygon
      points="25,26 25,22"
      transform={`rotate(${deg} 25 25)`}
      className="Clock__seconds">
    />
}

如何将这个动画的 svg 替换为仅绘制多边形的 svg

How to replace this svg that animates to just one that draws the polygon

svg

svg-animate