如何在保持纵横比的情况下缩放SVG矩形？

Question

这可能是一个愚蠢的问题，但我今天刚开始尝试SVG，并遇到了一个问题。我不确定自己是在错误的思路上考虑，还是尝试做一些不应该工作的事情。

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

理想情况下，我也希望能够设置SVG的最大高度和宽度进行缩放（例如1500x450）。

此外，我试图避免使用JavaScript来完成这个任务。

- Patrick McCaffrey

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>

Demo: http://jsfiddle.net/zApv4/

- Paul LeBeau

Answer 2

SVG有一个preserveAspectRatio属性。您可以将其放置在<svg>元素上，并根据您想要保留的宽高比，为其赋予适当的值，它会自动进行处理，无需JavaScript。但是，您还需要设置一个viewBox属性，否则preserveAspectRatio将被忽略。

- Robert Longson

---

谢谢！viewBox与preserveAspectRatio的结合正是我所需要的。 - Patrick McCaffrey