svg - 如何在保持纵横比的同时缩放 SVG 矩形？

Question

这可能是一个愚蠢的问题，但我今天才开始玩 SVG，并且遇到了一个问题。我不确定我是否只是以错误的方式思考它，或者我是否正在尝试做一些不应该工作的事情。

我想做的是创建一个 SVG 矩形，其高度是其宽度的 30%。我希望这个 SVG 在 <div> 内缩放，但我似乎无法让它工作。

理想情况下，我希望能够设置 SVG 的最大高度和宽度以缩放到(在本例中为 1500x450)。

另外，我尽量不使用 JavaScript 来完成这项工作。

Answer 1

为了使 SVG 正确缩放，它们需要有一个 viewBox 属性。 viewBox 属性描述了内容的边界。没有它，渲染器(浏览器等)无法确定如何缩放 SVG 以填充父级。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">

   <rect x="0" y="0" width="100" height="30" fill="orange" />

</svg>

演示: http://jsfiddle.net/zApv4/