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的路径，并且在它有效或正确之前，浏览器将呈现它。

Answer 2

是的，svgs 可以用在 css 背景图片中。对于您的情况，请将 css 修复为：

.icon {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' viewBox='0 0 64 16'%3E%3Ccircle fill='blue' cx='8' cy='8' r='8'/%3E%3Ccircle fill='red' cx='24' cy='8' r='8'/%3E%3Ccircle fill='yellow' cx='40' cy='8' r='8'/%3E%3Ccircle fill='green' cx='56' cy='8' r='8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

<div class="icon"></div>

SVG 的 URL 编码器，很容易从这里获取 css， https://yoksel.github.io/url-encoder/

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

2 个答案: