Menu
I have HTML like that below. I create a SVG with a viewbox of 100x100. When rendered (in Chrome) The svg is rendering itself as 200px wide (good) but ~500px high and the text is pushed off the bottom of the page. Making my window bigger or smaller has no affect - the SVG simply grows or shrinks in height accordingly.
Why is the svg not constrained in height in any way? Is there a way to make it automatically keep it's 1:1 aspect ratio? The content inside of the SVG is fine - it scales appropriately. This is causing some major headaches
<html>
<head>
<title>SVG Ahoy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="width: 200px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
preserveAspectRatio="xMinYMin meet" version="1.1"></svg>
<div>content below</div>
</div>
</body>
</html>
987
You have prserveApsectRatio set here, but I do not see a height on your div. Is that causing an issue?Also, if you look at the svg documentation, svg items default to 100% width and height. Try setting it's height and widths explicitly as pixel values and see if that helps.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
