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

Status: RESOLVED DUPLICATE of bug 1209061

Description

[Daniel Holbert [:dholbert]]

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?)

Comment 1

[David Baron :dbaron: 🏴󠁵󠁳󠁣󠁡󠁿 ⌚UTC-8 (if account gets disabled due to email bounces, ask a bugzilla admin to reenable it)]

Also see bug 923193 and https://drafts.csswg.org/css-transforms/#transform-box .

Comment 2

[Robert Longson [:longsonr]]

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.

Comment 3

[Daniel Holbert [:dholbert]]

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?