Closed Bug 1379340 Opened 2 years ago Closed 2 years ago
SVG element's transform-origin applied incorrectly and computed values are wrong
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Steps to reproduce: An SVG element styled with `transform` and `transform-origin` renders incorrectly and returns wrong computed values. See http://jsbin.com/yuhoxum/edit?html,js,output It styles an SVG rect shape with `transform-origin: 50% 50%; transform: scale(0.5)`. Actual results: The blue rect is offset incorrectly and the computed values are also wrong. It prints: computed transform: matrix(0.5, 0, 0, 0.5, 0, 0) computed origin: 60px 60px style transform: scale(0.5) style origin: 50% 50% 0px Expected results: The rendered offset should be something like 12.5px (50% of 50px = 25px / 2 = 12.5px). The computed values should be: computed origin: 25px 25px See the bottom example for a normal HTML DIV for comparison.
https://drafts.csswg.org/css-transforms/#transform-box For SVG elements without an associated CSS layout box, the used value for border-box is view-box. For elements with an associated CSS layout box, the used value for fill-box and view-box is border-box. Chrome gets this wrong and indends to fix its implementation.
Status: UNCONFIRMED → RESOLVED
Closed: 2 years ago
Resolution: --- → INVALID
Thanks for the confirmation. This is super helpful. However, couple questions: 1. There's still no way to customize transform-box on Firefox? 2. How can one define an "associated CSS layout box" for an SVG element? 3. Why does `svgElement.getBoundingClientRect()` returns pre-transform width/height? In the example above, it yields 50x50 as opposed to 25x25.
1. Firefox will support transform-box without setting a pref from version 55 per https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box 2. You can't, they don't have one. 3. bug 1066435
You need to log in before you can comment on or make changes to this bug.