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

UNCONFIRMED
Unassigned

Status

()

P3
normal
UNCONFIRMED
2 years ago
a year ago

People

(Reporter: paul.lebeau, Unassigned)

Tracking

51 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

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) https://jsfiddle.net/n9v54nro/2/

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 -->
      <path
         id="g-o-construction-shop-stage-one-door-right-top"
         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"/>
    </g>
  </svg>


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');
  doorElement.style.transform = 'rotate(90deg)';
    
  setTimeout(function () {
    doorElement.style.transform = '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;
}
(Reporter)

Updated

2 years ago
OS: Unspecified → Windows 7
Hardware: Unspecified → x86_64
The animation is unnecessary. The difference is between 

doorElement.style.transform = 'rotate(0deg)';

and

doorElement.style.transform = 'none';
https://www.w3.org/TR/css-transforms-1/#svg-transform-functions 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: https://jsfiddle.net/tygeonnm/
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.