如何縮放SVG圖像以填充瀏覽器窗口？

我想製作一個包含單個SVG圖像的HTML頁面，該圖像可以自動縮放以適應瀏覽器窗口，無需任何滾動操作，同時保持其高寬比。

例如，目前我有一個1024x768的SVG圖像;如果瀏覽器視口是1980x1000，那麼我希望圖像顯示在1333x1000（垂直填充，水平居中）。如果瀏覽器是800x1000，那麼我希望它以800x600（水平填充，垂直居中）顯示。

目前，我有它定義像這樣：

<body style="height: 100%"> 
    <div id="content" style="width: 100%; height: 100%"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
     width="100%" height="100%" 
     viewBox="0 0 1024 768" 
     preserveAspectRatio="xMidYMid meet"> 
     ... 
    </svg> 
    </div> 
</body>

然而，這是擴大到瀏覽器的全寬（用於廣角但短期窗口），生產垂直滾動，這是不是我想。

我錯過了什麼？

來源

2011-04-13 Miral

令人費解的是，我試圖移動在線樣式屬性添加到頭部的CSS樣式塊中，然後工作。我不知道爲什麼它有所作爲。（雖然我確實需要添加溢出：隱藏 - 否則有一個4像素的垂直滾動。） – Miral 2011-04-13 05:07:49

119

如何：

html, body { margin:0; padding:0; overflow:hidden } 
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

或者：

html, body { margin:0; padding:0; overflow:hidden } 
svg { position:fixed; top:0; left:0; height:100%; width:100% }

我使用（大約）這個技術，儘管有5％的間隔，周圍的一切，並使用position:absolute，而不是對我的網站爲例position:fixed：
http://phrogz.net/svg/svg_in_xhtml5.xhtml

（使用position:fixed防止一個非常邊緣的情況下鏈接到子頁面的錨在頁面上，並overflow:hidden可以確保不斷出現沒有滾動條（如果你有額外的內容。）

來源

2011-04-13 04:33:45 Phrogz

+24

和一個離開連接了2年後+1。 – msanford 2013-04-11 00:26:47

請注意，此解決方案依賴於'viewBox'屬性。 – ubershmekel 2014-04-12 15:05:57

大約4年後，這個鏈接就是在這裏。好工作，@Progrog！ – Richard 2015-03-05 23:09:42

如何縮放SVG圖像以填充瀏覽器窗口？

回答

相關問題