SVG "transform-origin: center" spins an element about center of SVG canvas instead of its own center

RESOLVED DUPLICATE of bug 1209061

Status

()

Core
SVG
RESOLVED DUPLICATE of bug 1209061
2 years ago
2 years ago

People

(Reporter: dholbert, Unassigned)

Tracking

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox44 affected)

Details

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Created attachment 8667705 [details]
testcase 1 (square should rotate in place, about its own center)

STR:
 1. Load http://codepen.io/corysimmons/pen/qspwE
 2. Watch the animated dot above the "i" which animates into view.

EXPECTED RESULTS:
 Dot should go straight down to the "i" and spin in place.

ACTUAL RESULTS:
 Dot shifts left & right.


I'm also attaching a reduced testcase, with "transform-origin: center" (or equivalently "50% 50%") and an animated rotation on a rect. In Chrome, this spins the rect about its center. In Firefox, it spins about *the center of the SVG canvas*.

robert / jwatt / heycam, do you know if we're doing the right thing? I suspect we're not, according to the MDN documentation at least, which says percentages are supposed to apply to the size of the bounding box (of the affected element, I imagine): https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

(It looks like we recently enabled this behavior in bug 1175492. If it turns out we're doing the wrong thing, should we revisit that decision?)
(Reporter)

Updated

2 years ago
Attachment #8667705 - Attachment description: testcase 1 → testcase 1 (square should rotate in place, about its own center)
Also see bug 923193 and https://drafts.csswg.org/css-transforms/#transform-box .

Comment 2

2 years ago
At the moment we only support transform-box:view-box without a pref and that seems to me to be what we're doing here (call out if you disagree)

That kind of makes this bug invalid since you want transform-box: fill-box and that isn't the default for SVG elements. 

bug 1209061 suggests that maybe transform-box: fill-box should be the default instead.
(Reporter)

Comment 3

2 years ago
Created attachment 8668582 [details]
testcase 2 (with "transform-box: fill-box"; matches Chrome rendering)

Ah, thanks for the clarification. I hadn't read up enough on the interactions between transform-box & transform-origin, & was just filed this for the difference between Firefox & Chrome's transform-origin handling here (without transform-box explicitly specified).

Here's a testcase with "transform-box: fill-box" - that does indeed make the rect spin in-place, as I'd initially expected.

Perhaps this should be duped to bug 1209061?

Updated

2 years ago
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1209061
You need to log in before you can comment on or make changes to this bug.