SVG上的Firefox转换来源仍然无效

时间:2018-11-08 08:02:35

标签: css firefox svg

当我们在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>

0 个答案:

没有答案