在窗口調整大小時自動縮放HTML中嵌入的SVG

我想在頁面大小調整時自動調整大小（使用SVG，CSS或JS）來將某些SVG嵌入HTML頁面，同時仍保留原始的寬高比。在窗口調整大小時自動縮放HTML中嵌入的SVG

例如，使用從W3Schools的一個例子：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" 
    stroke-width="2" fill="red"/> 
</svg>

是否有可能設置SVG寬度=窗口寬度的5％，並且具有高度比例縮放？

我試過幾件東西，包括preserveAspectRatio="xMinYMin meet"，並在<div>容器中將尺寸設置爲100％，但尚未完成它的工作。

有什麼建議嗎？

來源

2012-02-21 Keith Hughitt

你需要一個viewBox -attribute您的SVG根元素，這將定義SVG圖像的整體大小：

<svg version="1.1" viewBox="0 0 300 185">

現在，你可以通過CSS和設置圖像的寬度或高度將完美縮放。

來源

2012-02-21 17:15:15 feeela

這樣做。你知道viewBox的最後兩個參數是如何處理的嗎？增加它們似乎*減少了圖像的大小。 – 2012-02-21 20:11:00

這些數字是圖像的使用寬度和高度。在你上面的例子中，它會圈出+半徑：cx + r =寬度（140）和cy + r =高度（90）。你最好的選擇是通過像Inkscape這樣的圖形軟件來保存圖像，它將計算整體尺寸並將viewBox屬性寫入文件。如果使用Inkscape，請確保選擇「優化的Inkscape SVG」，這將產生更小的文件大小和可理解的XML源代碼。 – feeela 2012-02-22 10:56:34

這個答案剛剛救了我的一天！ – qed 2014-05-20 19:50:21

在窗口調整大小時自動縮放HTML中嵌入的SVG

回答

相關問題