6

我从 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%。

到目前为止，我一直无法找到不需要我同时设置高度和宽度的解决方案。

4

1 回答 1

8

方法一

将高度设置为您想要的。然后将宽度设置为比比例宽度大得多的值。那是停止渲染器自动降低高度以适应宽度。

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

但是，默认情况下，这将导致内容居中偏右，因此您还需要设置一个合适的preserveAspectRatio值。

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

方法二

将高度和宽度都设置为所需的高度。将 设置preserveAspectRatio为 1slice并将 设置overflow为visible。

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

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

于 2013-10-26T00:32:40.723 回答