如何按比例缩放SVG

Question

我已经导出了一个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%。

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

Answer 1

方法1

把高度设定到你想要的高度。然后将宽度设置为比比例宽度大得多的东西。那就是停止渲染器自动降低高度以适应宽度。

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

但是，默认情况下，这将导致内容以中心为中心的方式远离右侧，因此您还需要设置一个合适的preserveAspectRatio值。

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

方法2

将两个高度的宽度设置为所需的高度。将preserveAspectRatio设置为slice，并将overflow设置为visible。

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

这种方法可能不适用于某些情况。例如，如果您在HTML中嵌入，“不正确”大小可能导致布局错误。尽管它应该适用于独立的情况。