可以使用JavaScript SVG庫將SVG圖像顯示爲div背景嗎？

在一個HTML頁面中，我想在一個div元素中使用一個SVG圖像作爲背景，使用pre元素，並在其上面有文本（背景）。背景圖像應與包含div的比例縮放，同時保持寬高比。可以使用JavaScript SVG庫將SVG圖像顯示爲div背景嗎？

我可以使用SVG JavaScript庫之一來完成此任務嗎？例如jQuery SVG/Raphaël/svgweb？

的一種結構，我想背景圖片添加到：

<div> 
    <pre>Some text...</pre> 
</div>

來源

2011-09-05 aknuds1

你需要支持哪些瀏覽器，大多數只增加了在過去12個月左右使用SVG作爲背景圖片的支持。 – robertc

@robertc目前我專注於IE9，當前的Chrome和當前的Firefox。我一直無法使IE9和Chrome無法將SVG作爲背景圖像顯示出來:(儘管使用.png替換.svg並且它可以工作。 – aknuds1

您的問題聽起來像是您想要使用JavaScript生成SVG，然後使用它作爲背景，是這樣，還是你只想引用現有的SVG文件作爲獨立文件託管並將其用作背景？ – Phrogz

您可以使用SVG圖像作爲CSS背景，只需要支持最近的瀏覽器use background-size即可縮放圖像並保持寬高比。在這裏，圖像被直接應用到pre，只是demonstrate：

pre { 
    outline: 2px dashed black; 
    padding: 1em; 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg); 
    background-repeat: no-repeat; 
    background-size: cover; 
}

如果你想支持IE8和FF3.6那麼你就必須訴諸作爲andrewmu建議以絕對定位的元素。

來源

2011-09-05 14:30:40 robertc

明天我會試試這個。 – aknuds1

我發現現在SVG對我來說不適用於'background-image'的原因是Visual Studio開發服務器爲MIME類型爲'application/octet-stream'的SVG提供服務。另一方面，如果我指向維基媒體上的Konqi SVG，SVG會在瀏覽器中呈現:(這是一個已知問題嗎？任何想法如何強制正確提供SVGs？ – aknuds1

@ aknuds1什麼版本的Visual Studio/.Net/IIS？2010/4/7.5在web.config中添加['mimeMap']（http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types -with-iis7-web-config.aspx）在2008/3.5/6中，你需要在IIS管理中的HTTP Headers下進行配置 – robertc

~~SVG圖像是他們不能一個div背景DOM的一部分，而不是他們的元素，就像一個div 。~~

~~您可以在透明div後面放置SVG圖像以獲得背景幻覺。這隻需要將您的SVG和內容放置在適當的位置。~~

~~爲了獲得縮放比例，你應該使用一些數學來保持寬高比，應該很容易，這個字的比例是涉及的。這將是如何做到這一點的線索。~~

編輯

它看起來像我錯了 http://www.broken-links.com/2010/06/08/using-svg-in-background-image/它可以是一個背景。

來源

2011-09-05 13:38:50 austinbv

你能否概述你的建議解決方案你可以使用包含的div來製作SVG縮放嗎？ – aknuds1

我補充道，你如何實現它可以改變你實際上正在嘗試完成的內容 – austinbv

你是否推薦一個特定的庫？ – aknuds1

你總是可以作弊並使用position: absolute將兩個div放在同一個地方。

來源

2011-09-05 14:23:36 andrewmu

可以使用JavaScript SVG庫將SVG圖像顯示爲div背景嗎？

回答

相關問題