Re: [css-transforms] 'transform-box' defaults in svg

On Sep 28, 2015, at 12:44 PM, Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com<mailto:amelia.bellamy.royds@gmail.com>> wrote:

The default `transform-box` for SVG needs to be `view-box` in order to be consistent with current (SVG 1.1) behavior.  SVG transformations are by default relative to 0,0 in the userSpace coordinate system.  So the SVG default transform-origin is 0,0 and the default transform-box must somehow work out as equivalent to view-box.

Yes, that was the idea behind that.


It's true that many designers (and especially animators) coming from CSS would prefer to work with bounding-box for percentages, but that's why the `transform-box` property was introduced to allow the defaults to be changed.

That said, implementing this by mapping `border-box` to `view-box` could introduce unpleasant inconsistencies with other specs, such as filters and masking, which also have reference boxes but different SVG 1.1 defaults.

Since we're already agreed to use the user agent style sheet to set the SVG-specific `transform-origin`, it might make sense to use the same mechanism for setting `transform-box`.  Then come up with a universal mapping of CSS reference boxes to SVG reference boxes that will be consistent across all specs.

I am fine with this change if that is the pattern we agreed on. Do you have a reference to a CSS property where we explicitly do that?

Greetings,
Dirk


~Amelia


On 28 September 2015 at 15:27, Erik Dahlström <erik@dahlström.net<mailto:erik@xn--dahlstrm-t4a.net>> wrote:
Hi,
I was reviewing the 'transform-box' section in the css transforms spec, https://drafts.csswg.org/css-transforms/#transform-box.


The initial value of 'transform-box' is 'border-box', which is fine. However, the spec continues to state that:
"For SVG elements without an associated CSS layout box, the used value for border-box is view-box."

It seems to me that a used value of 'fill-box' in this case would lead to more easily understood behavior than 'view-box'. So, I'd like to know what the rationale behind the current choice is.

An example, http://jsfiddle.net/fs6cLt38/1/.


Cheers
/ed