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