New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-transforms] view-box interacts poorly with transform-origin percentages #2443
Comments
It occurs to me that this might be so absolute values for |
This isn't a mistake, it's just how SVG works. All positions in SVG are relative to the SVG didn't have a I agree that, in hindsight, this interaction means that the keyword versions of This is because the keywords map directly to percentage values: For setting If you're dynamically setting the percentages and <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> |
Er... but The whole point of |
But that's just it.
Sorry, over-simplified, there. Should have been "until |
Ah, I didn't realize it was just codifying the original behavior. Hmm. I'd love a |
Hmmm, interesting idea. Maybe in the same spec that eventually creates a CSS representation of the |
Per spec:
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, so0% 0%
ortop 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:
Is this a mistake, or is there a rationale for it that I'm missing? It seems to make
view-box
nearly useless if yourviewBox
isn't anchored at the origin.The text was updated successfully, but these errors were encountered: