我試圖實(shí)現(xiàn)一個(gè)關(guān)閉按鈕，使用SVG圖像作為背景圖像。下面是我正在使用的代碼:
.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>你可以在這里測試。
它變成16乘16的跨度，但是圖像不渲染。為什么會(huì)這樣？此外，圖像最初是黑色填充的。我想把它的填充改為白色。有什么辦法可以實(shí)現(xiàn)這一點(diǎn)？
所以，我的問題是:
為什么圖像不渲染為背景？ 如何改變SVG填充:懸停？(給定我的配置-在上面的鏈接中提供) 您需要設(shè)置寬度和高度，或者設(shè)置& ltsvg & gt。我會(huì)推薦viewBox，因?yàn)槟悴恍枰s放圖形來適應(yīng)。當(dāng)然你可以自由地設(shè)置它們，但是這很容易導(dǎo)致你的目的混淆。
請注意，要獲得適合每個(gè)元素的SVG，不要使用寬度和高度，而要使用視圖框。這里有一個(gè)關(guān)于視圖框的很好的解釋。
對于您發(fā)布的SVG，可能的視圖框大致如下:
<svg viewBox="16 104 170 170" >我不知道你是如何生成SVG的，但是為了解決這些問題，我使用了inkscape。只需打開文件>文檔屬性>根據(jù)內(nèi)容調(diào)整文檔大小并保存即可。
比，如果你愿意，在文本編輯器中打開svg，創(chuàng)建一個(gè)這樣的viewBox = " 0 0 & lt寬度>的值；& lt高度>值；"并刪除寬度和高度屬性。
祝你好運(yùn)！
在我的例子中，是xmlns屬性指定了缺失的xml名稱空間
我將我的svg從:
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="#000" id="square" />
</svg>對此:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<rect width="100%" height="100%" fill="#000" id="square" />
</svg>然后我用一個(gè)叫做& quotSVG的URL編碼器& quot由https://yoksel.github.io/url-encoder/ github pages托管
注意:你也可以使用任何url編碼工具，比如& quotEric Meyers URL解碼器/編碼器& quot[https://Meyer web . com/Eric/tools/dencoder/][2]但是上面提到的工具不僅僅是對SVG進(jìn)行url編碼，例如，它會(huì)在編碼之前用單引號(hào)替換雙引號(hào)，這將導(dǎo)致稍微小一點(diǎn)的結(jié)果(因?yàn)閱我?hào)不需要進(jìn)行編碼，與我們需要的雙引號(hào)相比)，而且可讀性更好，這是我喜歡的一點(diǎn)
然后我可以用它作為背景圖片，就像這樣:
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23000%22%20id%3D%22square%22%20%2F%3E%0A%3C%2Fsvg%3E");
}
</style>
</head>
<body>
<div class="box">
</body>
</html>