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

Question

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

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

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

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

score 5 · Accepted Answer

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

score 2 · Accepted Answer

SVG 有一个preserveAspectRatio属性。你把它贴在<svg>元素上，并根据你希望如何保留纵横比给它一个适当的值，它会为你做所有事情，不需要 javascript。您还需要设置 viewBox 属性，否则将忽略 preserveAspectRatio。

2 回答 2