CODEWITHSUNDEEP
svgsvg-animate
Pete
Pete

Reputation: 3451

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

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

Upvotes: 0

Views: 56

Answers (1)

ccprog
ccprog

Reputation: 21856

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

Upvotes: 2

Related Questions