SVG ViewBox 到宽高

Question

i really cannot understand how viewBox works i read alot about it but i want to know how can i make sure it fit the outer container like this example:

<div class="container">
<svg viewBox="0 0 100% 100vh">
<rect x="0.5" y="0.5" width="1200" height="800" fill="#19dddd"/>
</svg>
</div>

css:

.container{
width :100%;
height:100vh;
}

.container svg{
width:100%;
height:100%
}

can someone explain how can i make it fit inside the container to take its full width and height?

Answer 1

You must specify viewBox parameters without dimension units

viewBox="0 0 1200 800"

In order for the svg to completely fill the parent container, you need to delete the width and height of the svg or specify how you have done the width and height equal to 100%

 .container{ width:100vw; height:auto; }

 <div class="container"> <svg viewBox="0 0 1200 800"> <rect width="100%" height="100%" fill="#19dddd"/> </svg> </div>

Answer 2

MDN Web Docs' viewBox documentation has a straightforward explanation - inside the viewbox there are 4 numbers that you must modify for the min/max and default sizes. Yours probably isn't working because you've added % and vh parameteres; it only accepts numbers.

So you would be better off entering the size of the svg in number units.

Answer 3

It works when you display css proterties ( width and height ) by 100%, then add preserveAspectRatio="none" to your svg.

my viewBox="0 0 750 500".