将css背景图像设置为内联SVG符号？
将css背景图像设置为内联SVG符号？
提问于 2015-02-12 20:16:16
我知道外部svg文件可以链接到背景图像：
background-image: url(Icon.svg);并且符号id可以从外部svg文件中定位：
background-image: url(Icons.svg#Icon-Menu);但是如何将背景图像设置为内联 svg符号呢？(如下所示)
我的svg位于网页正文的顶部，而不是外部文件中。
我希望.test 背景图像成为.test符号。
.test{
background:#ddd url('../#Icon-Menu');
height:100px;
width:100px;
display:block;
}<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="Icon-Menu" viewBox="0 0 512 512">
<title>Menu</title>
<path d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V8.333 C96.417,6.679,95.071,5.333,93.417,5.333z" />
<path d="M93.417,40.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V43.333 C96.417,41.679,95.071,40.333,93.417,40.333z" />
<path d="M93.417,75.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V78.333 C96.417,76.679,95.071,75.333,93.417,75.333z" />
</symbol>
</svg>
</div>
<div class="test"></div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-02-12 22:05:36
Stack Overflow用户
发布于 2015-03-19 20:46:01
@Robert Longson
就是这样。但是你可以这样做。但是符号并不是它的工作方式。不幸的是，你必须使用"g“或类似的东西来引用。
body {
background: url(http://www.broken-links.com/tests/images/faces.svg#devil-view);
}http://codepen.io/Type-Style/pen/ByvKJq
如果svg在标记中，它将不起作用。
Stack Overflow用户
发布于 2016-01-25 07:17:59
(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>(2)第二种解决方案是使用数据URI:这里有一个很好的信息:使用这个工具的https://css-tricks.com/using-svg/：Mobilefish.com online conversion tool
CSS：
.logo {
background: url("data:image/svg+xml;base64,[data]");
}HTML：
<img src="data:image/svg+xml;base64,[data]">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28477256
复制相关文章
相似问题