CODEWITHSUNDEEP
htmlsvg
Arian
Arian

Reputation: 7719

SVG viewBox - Scaling in 2 directions

I have the following nested elements: 

<div>
<svg viewBox='0 0 240 60' preserveAspectRatio='xMidYMid meet'>
<rect width='240' height='60'></rect>
</svg>
</div>

I use viewBox to enable the SVG to fill the whole div container. BUT I want it to scale in two directions. So it can fill both of the following set of sizes for the div :

height = 120 , width = 480 height = 120 , width = 700

So it scales if both height and width scale OR if only width scales.

Upvotes: 1

Views: 259

Answers (1)

Pavel Gatnar
Pavel Gatnar

Reputation: 4053

To allow SVG to scale in both directions (and loosing aspect ratio) you have to use preserveAspectRatio='none'.

Upvotes: 1

Related Questions