可以在CSS背景图像中使用SVG <use xlink>吗？

Question

在这里我们可以看到SVG可以用在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,但我可能只是做错了.

Answer 1

这将在 W3C 验证器和 A-checker 中顺利通过。此外，CSS 类的 url 不会成为问题，因为我们指定了 CSS 的路径，并且在它有效或正确之前，浏览器将渲染它。