SVG不會呈現爲CSS背景圖像

我正在嘗試使用SVG圖像作爲background-image來實現關閉按鈕。以下是我正在使用的代碼：SVG不會呈現爲CSS背景圖像

.close-button { 
    width: 16px; 
    height: 16px; 
    background-image: url(data:image/svg+xml;base64,[The data for the image]); 
    background-size: 16px 16px; 
    background-position: center center; 
} 

<span class="close-button"></span>

您可以測試它here。

它變成了一個16×16的span，但圖像沒有渲染。這是爲什麼發生？此外，圖像原本是黑色填充的。我想改變它的填充爲白色。有什麼辦法可以做到這一點？

所以，我的問題是：

爲什麼不將圖像渲染爲背景？
如何更改在:hover上的SVG填充？（給我的配置 - 可以在上面的鏈接）

來源

2014-09-20 Victor

svg的外觀如何？ – philipp 2014-09-20 09:26:40

http://www.fileformat.info/info/unicode/char/274c/cross_mark.svg – Victor 2014-09-20 09:27:35

您需要設置要麼width和height，或在<svg>的viewBox屬性。我建議使用viewBox，因爲您不需要縮放圖形以適應它。當然，您可以自由設置所有圖形，但這很容易導致您的目的混亂。

請注意，要獲得適合每個元素的SVG，請不要使用width和height並使用viewBox。 Here是viewBox的一個很好的解釋。

對於SVG你貼一個可能視框可以大致是這樣的：

<svg viewBox="16 104 170 170" >

我不知道你是怎麼生成的SVG，但解決這些我用Inkscape的問題。只需打開文件>文檔屬性>將文檔大小調整爲內容並保存即可。

如果需要，可以在文本編輯器中打開svg，創建一個這樣的viewBox="0 0 <value of width> <value of height>"並刪除寬度和高度屬性。

祝你好運！

來源

2014-09-20 09:37:12 philipp

我已經從這裏下載了SVG：http://www.fileformat.info/info/unicode/char/274c/index .htm，所以我已經把它生成了。 – Victor 2014-09-20 09:50:02

好吧，只需將範圍的大小增加到300 300，並將背景大小設置爲相同的值，您將看到十字。你看不到它的原因是你正在顯示一個沒有圖形內容的圖形區域。在瀏覽器中打開svg並查看區域0 0 16 16，這只是空白。如果你不能修改SVG，它不會工作。 – philipp 2014-09-20 10:48:27

如果您在使用base64編碼修改後的svg時遇到問題：http://www.base64decode.org/ – philipp 2014-09-20 10:50:26

SVG不會呈現爲CSS背景圖像

回答

相關問題