1

When we apply a 2D CSS rotation to an SVG shape in Firefox (I'm on 63.0.1 - latest version), it gets misaligned. There are plenty of questions on this topic, eg. Setting transform-origin on SVG group not working in FireFox

I'm not seeing it as fixed, but perhaps I'm missing something. Best to look at my CodePen first: https://codepen.io/MSCAU/pen/GwozbO

Here's the gist of it:

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>
MSC
  • 3,286
  • 5
  • 29
  • 47
  • 1
    Seems to be pixel snapping taking place a the wrong point. Multiplying everything by 10 fixes it. You should raise a bugzilla bug unless there already is one. – Robert Longson Nov 08 '18 at 08:13
  • Yes. If I change the blue stroke-width to 0.1 or even 2 (matching the red circle), it all lines up a lot better. – MSC Nov 08 '18 at 08:53
  • I have submitted the bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1505932 – MSC Nov 08 '18 at 21:42

0 Answers0