Когда мы применяем 2D-вращение CSS к фигуре SVG в Firefox (я нахожусь на 63.0.1 - последняя версия), он смещается. Есть много вопросов на эту тему, например. Настройка источника преобразования в группе SVG, не работающей в FireFox
Я не вижу это как исправлено, но, возможно, я что-то упустил. Лучше всего сначала посмотреть на мой CodePen: https://codepen.io/MSCAU/pen/GwozbO
Вот суть этого:
circle {
fill: none;
transform-origin: center;
// transform-origin: 6px 6px; /* Makes no difference */
// transform-box: fill-box; /* Makes no difference */
}
circle:nth-child(1) {
stroke: red;
stroke-width: 2;
}
circle:nth-child(2) {
stroke: blue;
stroke-width: 1;
transform: rotate(-90deg);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="120" height="120">
<circle cx="6" cy="6" r="5"/>
<circle cx="6" cy="6" r="5"/>
</svg>