SVG element's transform-origin applied incorrectly and computed values are wrong

VERIFIED INVALID

Status

()

VERIFIED INVALID
a year ago
a year ago

People

(Reporter: dvoytenko, Unassigned)

Tracking

54 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

a year ago
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
Last Resolved: a year ago
Resolution: --- → INVALID
Status: RESOLVED → VERIFIED
(Reporter)

Comment 2

a year ago
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.