Closed
Bug 1209853
Opened 7 years ago
Closed 7 years ago
SVG "transform-origin: center" spins an element about center of SVG canvas instead of its own center
Categories
(Core :: SVG, defect)
Core
SVG
Tracking
()
RESOLVED
DUPLICATE
of bug 1209061
Tracking | Status | |
---|---|---|
firefox44 | --- | affected |
People
(Reporter: dholbert, Unassigned)
References
Details
Attachments
(2 files)
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•7 years ago
|
Attachment #8667705 -
Attachment description: testcase 1 → testcase 1 (square should rotate in place, about its own center)
Comment 1•7 years ago
|
||
Also see bug 923193 and https://drafts.csswg.org/css-transforms/#transform-box .
Comment 2•7 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•7 years ago
|
||
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•7 years ago
|
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•