In bug 1208550[1] we plan to allow the 'transform-box' property[2] to ride the
trains to release.
Summary: This property solves a common SVG authoring request - allowing
transforms in SVG to be relative to an element's bounds (to rotate around its
center, for example) - but in a more consistent way to Chrome/Safari's current,
sometimes confusing behavior.
When considering 'transform' and 'transform-origin' authors may want to change:
1) what percentage values in translations in 'transform' and what
percentage values in 'transform-origin' resolve against
2) what 'transform-origin' is relative to
Right now Blink/Webkit resolve percentage values in
'transform'/'transform-origin' in SVG against the elements bounding box. What
'transform-origin' is relative to depends on what type of value the author
specified. Percentage values in 'transform-origin' specify a position relative
to the top left corner of the element, whereas absolute values specify a point
relative to the origin of the element's current user space (necessary for
backwards compatibility with most SVG). In other words 'transform-origin' is a
little bit magical and unfortunately |transform-origin: 0% 0%| and
|transform-origin: 0 0| will usually specify completely different points. The
idea behind this behavior is that it should just "do the right thing" most of
the time, but it can trip authors up.
Mozilla doesn't have this problem since it always resolves percentage values in
SVG against the nearest SVG viewport's dimensions, and 'transform-origin' is
always relative to the origin of the element's current user space.
Edge doesn't yet implement percentage values in SVG.
Blink/Webkit and Mozilla's different approaches address different authoring use
cases. The former's approach allows authors to transform relative to the bounds
of an element in SVG, similar to a user's expectations if they're used to CSS
transforms in HTML. Mozilla's approach allows objects to be laid out
proportionally to the viewport and avoids the percentage/non-percentage
'transform-origin' gotcha.
The new 'transform-box' property will allow content authors to have transforms
behave in whichever of the ways meets their needs, and eliminate the magical
percentage/non-percentage 'transform-origin' behavior. One thing to note is that
what percentages resolve against and what 'transform-origin' is relative to is
tied together. Either percentage values resolve against the bounds of the
element and 'transform-origin' is relative to the top-left of the element's
bounds, or else percentage values resolve against the nearest SVG viewport and
'transform-origin' is relative to the origin of the element's current user
space.
-Jonathan
1. https://bugzilla.mozilla.org/show_bug.cgi?id=1208550
2. http://dev.w3.org/csswg/css-transforms/#propdef-transform-box
_______________________________________________
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform
