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％。

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

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，“不正确”的大小可能会导致布局错误。虽然它应该适用于独立的情况。

如何按比例缩放SVG

1 个答案: