user1226981
user1226981

Reputation: 11

ViewBox fill with svg

I have a graph (svg) inside a viewbox, if the graph is bigger than the viewbox it is shrank to fit, but if the graph is smaller than the viewbox it is not uniformed stretched in order to fill the maximum area in the viewbox.

don't understand why preserveAspectRatio="xMidYMid meet" doesn't make what i want.

thanks for future answers

Upvotes: 1

Views: 2155

Answers (1)

Erik Dahlström
Erik Dahlström

Reputation: 60966

You seem to be confusing terminology, in your question 'viewbox' should probably be replaced by 'viewport'.

preserveAspectRatio="xMidYMid meet" means to fill the maximum amount of space while still maintaining the aspect ratio, and to center the svg. If you want to fill the entire viewport then you can either use preserveAspectRatio="xMidYMid slice" which will slice away some parts of the svg if necessary, or preserveAspectRatio="none" which stretches the svg such that it completely fills the viewport but without preserving the aspect ratio.

You can also adjust the 'viewBox' attribute on the svg such that it matches the aspect ratio of the viewport you want to use it in.

Upvotes: 1

Related Questions