Html 将css背景图像设置为内嵌SVG符号？

我知道外部svg文件可以链接到背景图像：

background-image: url(Icon.svg);

可以从外部svg文件中以符号id为目标：

background-image: url(Icons.svg#Icon-Menu);

但是如何将背景图像设置为内联svg符号？（如下）

我的svg位于网页正文的顶部，而不是外部文件中

我希望

。测试
背景图像是否为
#图标菜单
符号。


.test{
背景：#ddd url（“../#图标菜单”）；
高度：100px；
宽度：100px；
显示：块；
}

菜单
图像必须是完整的文件

从

“image”元素表示要呈现完整文件的内容

背景图像等也是如此。
@Robert Longson

没错。但你可以这样做。
但符号不是它的工作方式。不幸的是，您必须使用“g”或类似的东西来引用

body {
  background: url(http://www.broken-links.com/tests/images/faces.svg#devil-view);
}


如果svg在标记中，它将不起作用。
（1）使用内联svg的一种可能方法是使用符号和DIV绝对分层：

<a class="preview-modal__device-icon-link" ng-click="setPreviewWidth('phone')">
   <svg class="preview-modal__device-icon"><use xlink:href="#icon-phone">
   </use></svg>
</a>

HTML:


我不认为你能做到这一点（至少以你尝试的方式），我也不确定你为什么要这么做。@Paulie\u我不确定你能不能做到。我知道svg可以用作背景。我只是好奇，如果我能在cssAn中完成所有工作，它会节省很多htl标记。图像必须是一个完整的文件。忘记规范，这很有意义，对吗？“糟了！”-Napolean Dynamicea css背景，带有一个内联svg的base64，并带有一个指向本地符号的href，似乎不起作用。我需要在“data:image/svg+xml；base64，[data]”处添加url吗？@AlexNikonov，您不能将url与数据URI一起使用。使用数据uri，您可以对文件的全部内容进行base64编码（例如，使用post中的mobilefish链接），并将该代码粘贴到[data]的位置。data-uri无法访问文件本身。不确定为什么选择此选项（并向上投票）。它没有提供一个完整的答案。@A_uuu提供的链接要多得多helpful@Majo0od在什么情况下，“您不能这样做”是一个不完整的答案，当它引用规范来说明原因时。如果您更改标记，但无法显示OP所要求的符号，则有一些方法可以实现类似的效果。谢谢！我想知道这是浏览器实现中的一个bug，还是仅仅是技术上的一个怪癖？
.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

<img src="data:image/svg+xml;base64,[data]">