I have recently learned about a rotate transform that allows for rotating around a specified center point using the `rotate(angle, centerX, centerY)` method. However, I have noticed that this method does not seem to work when applied via CSS.
Interestingly, it works perfectly fine when used inline as an attribute:
<svg>
<circle cx="50" cy="50" r="3" style="fill: black"/>
<g id="arrow" style="stroke: black">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90, 50, 85 45, 85, 55"/>
</g>
<use xlink:href="#arrow" transform="rotate(60, 50, 50)"/>
</svg>However, applying this through a CSS style rule seems to present issues:
#arrow2 {
transform: rotate(60, 50, 50);
}<svg>
<circle cx="50" cy="50" r="3" style="fill: black"/>
<g id="arrow" style="stroke: black">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90, 50, 85 45, 85, 55"/>
</g>
<g id="arrow2" style="stroke: red">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90, 50, 85 45, 85, 55"/>
</g>
</svg>