2015-10-07 148 views
5

這裏我們可以看到SVG可以用在CSS背景圖像中。SVG <use>可以在CSS背景圖片中使用嗎?

.icon { 
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>'); 
background-repeat: no-repeat; 
background-size: auto 100%; 
display: inline-block; 
} 

但是<svg><use xlink:href="svg.svg#mySVG"></use></svg>可以執行嗎?這對我來說是無效的CSS,但我可能只是做錯了什麼。

+0

圖像必須在一個文件中完成,因此''引用必須位於圖像內部,而不是您擁有的外部文件。 –

回答

0

這將在W3C驗證器和A-檢查器中傳遞,沒有任何錯誤。此外,CSS類的url不會成爲問題,因爲我們指定了CSS的路徑,直到它有效或正確,瀏覽器纔會呈現它。