html - 内联 SVG 的固有比率

Question

我正在使用 JS 构建内联 SVG。 SVG 的比例(又称比率)是动态的:它可以随时从 JS 更改。

我想让 SVG 响应。这就是我用 <img> 做的方式:

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

但这不适用于 <svg> . fiddle :http://jsbin.com/vobaq/1/edit?html,css,output

目标是缩放内联 SVG 元素以水平适应容器而不扭曲其比例。 CSS 不应知道当前的 SVG 比例。

Answer 1

解决方案是使用viewbox 属性代替width 和height。那么你甚至不需要 CSS width: 100%;高度:自动；!

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