如何等比缩放SVG图像

Question

我从Illustrator导出了一个SVG图形，想要设置SVG的高度并使宽度成比例缩放。

这是示例SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="10px" viewBox="0 0 20 10">
        <path fill="#124C92" d="M20,7c0,1.65-1.35,3-3,3H3c-1.65,0-3-1.35-3-3V3c0-1.65,1.35-3,3-3h14c1.65,0,3,1.35,3,3V7z" />
</svg>

如果我只设置了高度，SVG的宽度将被设置为100%。

到目前为止，我还没有找到不需要同时设置高度和宽度的解决方案。

- Ben Foster

Answer 1

方法1

将高度设置为所需高度，然后将宽度设置为比比例宽度大得多的值。这是为了防止渲染器自动缩小高度以适应宽度。

<svg height="100px" width="1000px" ... >

然而，默认情况下，这会导致内容偏向右侧居中，因此您还需要设置适当的preserveAspectRatio值。

<svg height="100px" width="1000px" preserveAspectRatio="xMinYMin" ... >

方法二

将高度和宽度都设置为所需的高度。将preserveAspectRatio设置为使用slice的比例，并将overflow设置为visible。

<svg height="100px" width="100px" preserveAspectRatio="xMinYMin slice" overflow="visible" ... >

这种方法并不适合所有情况。例如，如果您在HTML中嵌入，'错误'的尺寸可能会导致布局不正确。但对于独立的情况应该是可行的。

- Paul LeBeau