Closed Bug 1209853 Opened 5 years ago Closed 5 years ago

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

Categories

(Core :: SVG, defect)

defect
Not set
normal

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?)
Attachment #8667705 - Attachment description: testcase 1 → testcase 1 (square should rotate in place, about its own center)
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.
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?
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1209061
You need to log in before you can comment on or make changes to this bug.