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

这可能是一个愚蠢的问题，但我今天刚刚开始使用SVG，并且遇到了一个问题。我不确定我是否只是在错误地思考它，或者如果我正在尝试做一些无法工作的事情。如何在保持纵横比的同时缩放SVG矩形？

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

理想情况下，我希望能够为SVG设置最大高度和宽度，以便在此范围内（1500x450）。

此外，我试图不使用JavaScript来完成这件事。

SVG具有preserveAspectRatio属性。你坚持它在<svg>元素，并给它一个合适的值，这取决于你希望如何保持宽高比，它会为你做所有事情，不需要JavaScript。您还需要设置viewBox属性，否则将忽略preserveAspectRatio。

2013-10-21 21:28:58

谢谢！ viewBox与preserveAspectRatio结合正是我所期待的。 –

为了使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>

2013-10-22 05:00:42

回答