当我们在Firefox中将2D CSS旋转应用于SVG形状时(我使用的是63.0.1-最新版本),它变得未对齐。关于这个话题有很多问题,例如。 Setting transform-origin on SVG group not working in 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>