SVG elements shift when performing a rotation with absolute transform-origin




2 years ago
a year ago


(Reporter: paul.lebeau, Unassigned)


51 Branch
Windows 7

Firefox Tracking Flags

(Not tracked)





2 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce:

1. Try the following link (or see demo see files below)

2. Hover over red rectangle

Actual results:

"Door" jumps downwards by one unit before rotating

Expected results:

"Door" should rotate around transform origin (green dot).  This test case works correctly in Chrome.

===== Demo files =======

  <svg width="500" height="500" viewBox="105 125 20 20" id="svg">
    <g id="ground">
      <!-- ROOM OUTLINE -->
      <path class="o-whole" d="M 108.5,120 v 10" />
      <!-- ROOM FILL -->
      <rect id="g-f-construction-shop" class="f" width="109" height="200"/>
      <!-- DOOR -->
         class="door o-door-right-top"
         style="transform-origin:108.5px 130.5px;"
         d="m 108,130.5 h 5.99996"
      <circle cx="108.5" cy="130.5" r="0.2" fill="limegreen"/>

var room = document.getElementById('g-f-construction-shop');

room.addEventListener('mouseenter', function animateDoors() {
  var doorElement = document.getElementById('g-o-construction-shop-stage-one-door-right-top'); = 'rotate(90deg)';
  setTimeout(function () { = 'rotate(0)';
  }, 750);

.o-whole, .door {
  stroke: #000;
  fill: none;
  opacity: 1;
.f {
  fill: #ff6600;
  opacity: 0.1;
.o-door-right-top {
  transition: transform 0.75s;


2 years ago
OS: Unspecified → Windows 7
Hardware: Unspecified → x86_64
The animation is unnecessary. The difference is between = 'rotate(0deg)';

and = 'none'; suggests that rotate potentially messes with the transform-origin so maybe the transform-origin is being overwritten for SVG content somehow? For SVG content the transform-origin default is 0, 0, which is different to html.

Comment 3

2 years ago
it's noteworthy to point out that vertical paths shift horizontally, and vice-versa; thus horizontal paths shift vertically.

from my own experience, vertical paths always shift to the right, and horizontal paths always shift downwards. also, i'm fairly certain that they shift by HALF A UNIT, not a whole unit.

Comment 4

2 years ago
here is an elaborate jsfiddle to demonstrate the direction of shifting:
Component: Untriaged → SVG
Product: Firefox → Core
Priority: -- → P3

Comment 5

a year ago
@Jet Villegas I'm assuming P3 is the priority level? What are the diff levels?
You need to log in before you can comment on or make changes to this bug.