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

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

There is a small error in the quotes of the approved answer so I'm posting the fix here as well.

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

CodePudding user response：

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">
    />
}