Quote:
Originally Posted by klgc
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="66.67%" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<image width="600" height="400" xlink:href="../Images/C02Ilus05.png"/>
</svg>
|
The problem is that
height="66.67%" means 66.67% of the height of the containing block, which is unbounded, and so in effect 66.67% of the page height, but the image is not tall enough to fill that space.
I think the solution is to remove the
width="100%" and
height="66.67%" from the <svg> and add this to your CSS stylesheet instead:
Code:
svg { width:100%; max-width:100%; height:auto; max-height:100%; }
Edit: or add it to the <svg> as an inline style instead:
Code:
style="width:100%; max-width:100%; height:auto; max-height:100%;"
Edit2: The important point is that auto doesn't work in SVG without a bound, so if you use height:auto you must set max-height as well.