內聯svg填充整個屏幕

我已經買了一個svg圖形，我已經導出到.svg文件，以便它可以用於內聯HTML。我已將它插入到我的文檔的<body>標記中，但現在我希望它填充屏幕的全寬和全高。我試過將寬度和高度屬性設置爲<svg>,position: absolute和top, right, bottom, left: 0,viewBox設置爲"0 0 screen_width screen_height"，加載.svg文件爲圖像並強制圖像爲全窗口使用position: absolute和top, right, bottom, left: 0。
雖然沒有任何工作。內聯svg填充整個屏幕

下面是SVG本身：http://pastebin.com/y8kqf1bD

我已經嘗試了所有的從Full width and height SVG的選擇，但他們不工作了。

你有個想法，我該怎麼做？

非常感謝！

來源

2013-10-22 user2908600

請記住！ ViewBox不是它有多大。 ViewBox實際上與它的大小相反。 ViewBox在原始大小上有多大。增加ViewBox寬度會減小尺寸寬度。 – bjb568

<svg>元件使用高度尺寸和寬度屬性，以便

<svg height="100%" width="100%"> 
</svg>

將填充屏幕。

您還需要同時設置<html>和<body>標籤style =「width：100％; height：100％」以確保它們覆蓋屏幕。這是一個完整的全屏矩形：

<html style="width:100%;height:100%;"> 
<body style="width:100%;height:100%;margin:0;"> 
    <svg height="100%" width="100%"> 
     <rect fill="lime" width="100%" height="100%"/> 
    </svg> 
</body> 
</html>

來源

2013-10-22 20:50:09

內聯svg填充整個屏幕

回答

相關問題