當瀏覽器窗口填滿整個瀏覽器窗口時，SVG顯示viewBox外的內容

我想要一個內聯SVG填充瀏覽器窗口的整個寬度。 SVG在viewBox之外有一些內容。這是SVG文件：http://pastebin.com/F5irDNai 當瀏覽器窗口填滿整個瀏覽器窗口時，SVG顯示viewBox外的內容

什麼，當我將寬度設置爲100％的情況是，視框之外的內容變得可見：

svg { 
    width: 100%; 
}

看到這個的jsfiddle：https://jsfiddle.net/3w2hy8kv/1/ 紅色矩形是視圖框邊界。

我想要的是SVG的viewBox水平填充整個瀏覽器窗口，而不會出現viewBox外的內容。那可能嗎？

來源

2017-01-23 Dag Henning Liodden Sørbø

不溢出：隱藏;工作？ –

不，我已經在父元素，正文和svg本身上嘗試過了，並且我沒有隱藏viewBox外的內容。只要寬度大於viewBox，viewBox就會出現在viewBox外部。 –

您需要查看preserveAspectRatio屬性。也可以嘗試在div上放一個邊框來查看結果。其他要尋找的東西：svgomg優化您的svg，sara souedan關於preserveAspectRatio的文章。最接近你想要的東西我用'preserveAspectRatio =「xMinYMid slice」'獲得了svg元素 – Ruskin

感謝@Ruskin和SVG viewbox showing showing off-screen items讓我朝着正確的方向前進。

屬性添加到SVG元素：

preserveAspectRatio="xMidYMin slice"

它也可以添加使用JavaScript這個屬性。

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

#theSVG svg { 
    width: 100%; 
    height: 100%; 
}

見更新小提琴：https://jsfiddle.net/74cc07m1/1/

編輯：撥弄優化SVG更新：https://jsfiddle.net/74cc07m1/2/

來源

2017-01-24 08:26:47

真棒...現在只需優化與https://jakearchibald.github.io/svgomg/ – Ruskin

完成SVG。請參閱編輯。 –

當瀏覽器窗口填滿整個瀏覽器窗口時，SVG顯示viewBox外的內容

回答

相關問題