3 ms·

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

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/preserveAspectRatio 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 :)

kjhughes 7y ago
Thank you for the explanation (and for the cool visualization, btw). 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": react-dom.production.min.js:978 Error: <svg> attribute preserveAspectRatio: Unrecognized enumerated value, "meet".