將SVG伸展到視口（容器格）無視Aspect Ration Set由viewBox

我在jsbin上內嵌svg。它看起來是這樣的：將SVG伸展到視口（容器格）無視Aspect Ration Set由viewBox

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve" width="100%" height="100%" preserveAspectRatio="none"> 
// different svg element groups and paths 
</svg>

正如從output清楚，它走的是視口的寬度，但沒有得到視口的高度，有一個白色的空間超出了SVG的高度（這是如果用戶打開開發工具並模擬iPad視圖或在Chrome上全屏顯示，那麼很明顯）。期望的需要是讓svg適合視口。

SVG已導出，以便路徑相框和燈泡相對於整個svg視圖框座標。因此，我無法分離出各個路徑並與它們即插即用，這對於移動視圖（我是否需要）來說是必需的，即它們與視圖框大小相關聯。

如何獲得我的svg採取視口的寬度和大小，至少爲桌面版本。

來源

2017-02-16 gdad-s-river

對SVG嘗試添加屬性preserveAspectRatio =「無」 – arturmoroz

你可以得到你的SVG通過設置vh值以填充視口高度爲height

svg { 
    height: 100vh; /* Fill entire viewport height */ 
}

這將破壞你的長寬比，雖然。你需要保持寬高比還是隻需讓SVG填滿整個屏幕？

（也，以確保您填寫您可能想擺脫默認保證金body {margin: 0;}的整個屏幕）

來源

2017-02-16 09:58:11 Digedu

嘿@Digedu，謝謝回答！是的，它的作品，並回答我的問題。長寬比會被殺死是的，這是一個無賴。我想我應該問我的項目設計師分別導出照片svg幀，燈泡和導線，以便它們獨立於背景如何填充視口，以便我能夠獨立地處理響應性那些獨立的svg圖像。我不是嗎？ –

不幸的是，我自己對網絡上的SVG很陌生。如果是我試圖實現這一點，我會欺騙一點，不會改變SVG的高度，但要充分利用純色的背景色：'body {background：＃243347;}你的觀衆不會聰明;） – Digedu

這就是計劃！謝謝：） –

將SVG伸展到視口（容器格）無視Aspect Ration Set由viewBox

回答

相關問題