内联SVG的本征比

Question

I'm building an inline SVG with JS. The proportions (aka ratio) of the SVG is dynamic: at any moment it can be changed from JS.

I would like to make the SVG responsive. This is how i would do it with an <img> :

img {
  width: 100%;
  height: auto;
}

But this won't work for <svg> . Fiddle: http://jsbin.com/vobaq/1/edit?html,css,output

The goal is to scale the inline SVG element to fit container horizontally without distorting it's proportions. CSS should not know current SVG proportions.

Answer 1

The solution is to use the viewbox attribute instead of width and height . Then you don't even need CSS width: 100%; height: auto; width: 100%; height: auto; !

Demo: http://jsbin.com/vobaq/4/edit?html,css,output