如何按比例缩放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%.

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

Answer 1

方法1

将高度设置为您想要的高度.然后将宽度设置为远大于比例宽度的宽度.这是为了阻止渲染器自动降低高度以适应宽度.

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

但是,默认情况下,这会导致内容偏向中心,因此您还需要设置合适的preserveAspectRatio值.

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

方法2

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

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

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