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

Question

I'm sure this is an easy question for someone who knows svg, however, that's not me and I' converting an existing program that uses svg and don't have access to the original programmer to ask.

I have the following function that renders a polygon and every second, rotates it. I want it to just render the original polygon and stop. If I remove the animateTranform element completely, I get the vector, but not set to the position I want in degrees. I can change the to= line to just include +0 instead of +360 but that seems strange.

I'd appreciate if someone could suggest how to make this simpler and non moving. Thanks

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

If you want to maintain the direction the arrow points at to be deg, include a transform="rotate(${deg} 25 25)" attribute with the polygon.

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