|
|
|
|
|
|
by wattenberger
2401 days ago
|
|
|
Good question! I'm trying to find a good way to explain this bit in the guide. This is due to the preserveAspectRatio property on the svg element. Its default value is `meet`, which scales the svg with three rules: - aspect ratio is preserved
- the entire viewBox is visible within the viewport
- the viewBox is scaled up as much as possible, while still meeting the other criteria https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/p... If you fiddle with the attribute value in the Dev Tools, try setting it to `xMinYMid` or `none` to see if that gives you a good sense of how it works. I'm worried that it might just confuse if not explained well :) |
|
|
It seems that preserveAspectRatio is an important part of understanding viewBox. IMO, it deserves a spot on the telescope's controls. I think a value of `none` might be the best starting point; all of the settings that result in combined scaling and displacement are less intuitive and likely harder to understand at first exposure.
Aside: Even if you decide to keep `xMidYMid ` as the default value for preserveAspectRatio, it seems that you ought to list it explicitly if you wish to specify a meetOrSlice value as Chrome is currently complaining with your existing preserveAspectRatio="meet":