How do I animate a polygon to spin in place with SVG? - html

Question

I have an 8 sided polygon that I want to spin clockwise at its center axis with text. Looking at MDN web docs shows a simple triangle spinning in place, but when I apply it to a polygon it doesn't quite work.
<svg width="500" height="300">
<polygon
points="25,5 75,5 100,30 100,80 75,105
25,105 0,80 0, 30"
style="stroke:gray; fill:#cc3333; stroke-width: 3;">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite"/>
</polygon>
</svg>

Answer 1

The centre of the polygon is at 50, 52.5 so you need to rotate round that.
console.log(document.getElementsByTagName("polygon")[0].getBBox());
<svg width="500" height="300">
<polygon
points="25,5 75,5 100,30 100,80 75,105
25,105 0,80 0, 30"
style="stroke:gray; fill:#cc3333; stroke-width: 3;">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 50 52.5"
to="360 50 52.5"
dur="10s"
repeatCount="indefinite">
</svg>