如何按比例縮放SVG

我已經從Illustrator中導出了一個SVG，並且想設置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％。

到目前爲止，我一直無法找到一個解決方案，不需要我設置高度和寬度。

來源

2013-10-25 Ben Foster

方法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嵌入，「不正確」的大小可能會導致佈局錯誤。雖然它應該適用於獨立的情況。

來源

2013-10-26 00:32:40

如何按比例縮放SVG

回答

相關問題