如何在保持纵横比的同时缩放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/

Answer 2

SVG具有preserveAspectRatio属性。你将它贴在<svg>元素上，并根据你想保留宽高比的方式给它一个合适的值，它会为你做所有事情，不需要javascript。您也需要设置viewBox属性，否则忽略preserveAspectRatio。