如何按比例缩放SVG [英] How to scale SVG proportionally

问题描述

我已经从Illustrator中导出了SVG，并且想要设置SVG的高度并按比例设置宽度比例.

I've exported an SVG from Illustrator and would like to set the height of the SVG and have the width scale proportionally.

这是示例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％.

If I only set the height, the SVG width is set to 100%.

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

So far I've been unable to find a solution that doesn't require me to set both the height and width.

推荐答案

方法1

将高度设置为所需的高度.然后将宽度设置为比比例宽度要大得多的值.那是为了阻止渲染器自动减小高度以适合宽度.

Set the height to what you want. Then set the width to something much greater than the proportional width would ever be. That's to stop the renderer automatically reducing the height to fit the width.

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

但是，默认情况下，这会使内容居中于右侧，因此您还需要设置一个合适的preserveAspectRatio值.

However, by default, that will cause the content to be centred way off to the right, so you will also need to set a suitable preserveAspectRatio value.

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

方法2

将高度和宽度都设置为所需的高度.用slice将preserveAspectRatio设置为1，然后将overflow设置为visible.

Set both the height an width to the desired height. Set the preserveAspectRatio to one with slice and set the overflow to visible.

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

此方法可能不适用于某些情况.例如，如果您嵌入HTML，则不正确"的大小可能会导致布局错误.尽管它应该适用于独立情况.

This approach may not be suitable for some situations. For example, if you are embedding in HTML, the 'incorrect' size may result in the layout being wrong. Though it should work for standalone situations.

这篇关于如何按比例缩放SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！