Set transform-box on Animated SVG
MUST: Transform animated SVG shapes on a `<g>` wrapper with `transform-box: fill-box` and `transform-origin: center` — the CSS default `view-box` resolves the origin against the `viewBox`, so an off-centre shape orbits the canvas instead of spinning in place.
Wrap animated SVG shapes in a <g> and set transform-box: fill-box with transform-origin: center
g.spinner { transform-box: fill-box; transform-origin: center; animation: spin 1s linear infinite; }Bad
Good
Why it matters
CSS transforms on SVG elements default to `transform-box: view-box`, so `transform-origin: center` resolves to the centre of the SVG viewport — not the centre of the shape. Rotate or scale an icon that sits anywhere off-centre in its viewBox and it orbits the canvas instead of spinning in place. Setting `transform-box: fill-box` re-points the origin at the element's own bounding box, which is almost always what you meant. Put it on a <g> wrapper so the whole shape shares one origin and the transform does not have to be repeated per path.