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

This isn't a mistake, it's just how SVG works.  All positions in SVG are relative to the `viewBox` origin.  If you want to draw a `<rect>` that fills the `viewBox`, setting `width="100%" height="100%"` isn't enough, you also need to adjust the `x` and `y` values to match the `viewBox` offsets.

SVG didn't have a `transform-origin`, but it did have the ability to move your `viewBox` origin into the middle of the graphic.  It does mean that you need to be aware of your `viewBox` origin whenever you are using `transform-origin` with `transform-box: view-box`.

I agree that, in hindsight, this interaction means that the keyword versions of `transform-origin` are confusing. `center`, `left`, `right`, and so on aren't the center, left, right, etc. of the actual viewbox, but of a constructed box positioned at the origin.

This is because the keywords map directly to percentage values: `center` is equivalent to `50% 50%`, and percentages are measured relative to the origin, the same as absolute values. If the entire system had been designed starting with SVG, we might have created "smarter" keywords, that adjusted to the current `viewBox`, but there is probably too much web content relying on the keywords computing directly to percentages.

For setting `transform-origin` when using `view-box` as your reference frame, I'd recommend sticking with percentage or pixel values, or `calc()` combinations of the two.

If you're dynamically setting the percentages and `viewBox` offsets, you could use custom properties, and then a calc funtion to keep them logically separate:

```html
<svg viewBox="-40 -30 80 60" style="--vbx: -40; --vby: -30">
<circle r="20"/>
</svg>
<style>
circle {
--tox: 50%;
--toy: 100%;
transform-origin: calc(var(--vbx) + var(--tox)) calc(var(--vby) + var(--toy));
}
</circle>
```

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2443#issuecomment-373422152 using your GitHub account

Received on Thursday, 15 March 2018 15:43:11 UTC