Closed Bug 1379340 Opened 2 years ago Closed 2 years ago

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


(Firefox :: Untriaged, defect)

54 Branch
Not set





(Reporter: dvoytenko, Unassigned)


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.


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.

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.
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 
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.