Responsive SVG, zoom in the center of x axis not resize

user_13583939 0
Viewed 191

I'm trying to make an SVG responsive in the x-axis but I don't want it to scale with the window. In fact, I would like to make it keep the same aspect ratio, the same height, and also fill the same parent div, so it would be a zoom in the view box in the center of the width axis.

It would look like this : enter image description here

I'm currently playing around with the view box and I have

(for WinWidth < SvgWidth && WinWidth > SvgWidth/ 2) , deltaWidth = SvgWidth - WinWidth

viewbox = ((deltaWidth / 2)     0     (SvgWidth - deltaWidth)     SvgHeight)

But this is not working as there are still blank spaces on top and bottom of the parent div. Can you please explain to me what am I getting wrong? I suppose it's because the ratio between width and height is no longer the same but i dont find how to arrange that. Thanks in advance

svg css html
1 Answers

As I thought, it was linked to the ratio of the svg not being the same as the ratio of the window. Here is what I simply made. As I didnt see anything on the internet about that, maybe it can help, enjoy :)

ratioWidth = SvgHeight * WinWidth / WinHeight
viewBox= ((SvgWdth - ratioWidth / 2) 0 ratioWidth SvgHeight)

But as enxaneta said, you can do it with `height="100vh" width="100vw" preserveAspectRatio="xMidYMid slice", in my point of view it's cleaner.

user_135839390
Related