[csswg-drafts] [css-transforms] view-box interacts poorly with transform-origin percentages

eevee has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transforms] view-box interacts poorly with transform-origin percentages ==
Per [spec](https://drafts.csswg.org/css-transforms/#transform-box):

> If a `viewBox` attribute is specified for the SVG viewport creating element:
>
> * The reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute.
>
> * The dimension of the reference box is set to the _width_ and _height_ values of the `viewBox` attribute.

This seems to say that the box is the _size_ of the viewport, but is shifted so that its upper-left corner is always at (0, 0).  Percentages for `transform-origin` are relative to the edges of the box, so `0% 0%` or `top left` will always mean the point (0, 0), which may be anywhere within the viewport or outside it entirely.

Firefox and Chrome both behave this way.  I would expect this to scale the square down around the center of the viewport, but instead it scales down around the point (100, 100), which is ¾ of the way across:

```
<svg viewBox="-50 -50 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="-50" y="-50" width="200" height="200" fill="#f4f4f4"/>
<rect x="-25" y="-25" width="150" height="150" fill="none" stroke="pink"/>
<rect x="-25" y="-25" width="150" height="150" fill="none" stroke="lightblue"
    style="transform: scale(0.5); transform-origin: center; transform-box: view-box;"/>
</svg>
```

![demo](https://user-images.githubusercontent.com/94112/37472030-4d6e5654-2828-11e8-8da2-2729adc46837.png)

Is this a mistake, or is there a rationale for it that I'm missing?  It seems to make `view-box` nearly useless if your `viewBox` isn't anchored at the origin.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2443 using your GitHub account

Received on Thursday, 15 March 2018 15:12:09 UTC