将CSS背景图像设置为嵌入式SVG符号? [英] Setting a css background image to an inline SVG symbol?
本文介绍了将CSS背景图像设置为嵌入式SVG符号?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我知道可以将外部svg文件链接到背景图片:
I know external svg files can be linked to background images:
background-image: url(Icon.svg);
可以从外部svg文件中定位
和符号ID:
and symbols id's can be targeted from an external svg file:
background-image: url(Icons.svg#Icon-Menu);
但是如何将背景图片设置为内嵌 svg符号?(如下)
but how can I set a background image to an inline svg symbol? (As below)
我的svg位于我的网页正文顶部,而不位于外部文件中.
我希望 .test
背景图片成为#Icon-Menu
符号.
I want .test
background image to be the #Icon-Menu
symbol.
.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>
推荐答案
图像必须是完整的文件.
An image must be a complete file.
来自 SVG规范 ...
"image"元素表示要渲染完整文件的内容...
The ‘image’ element indicates that the contents of a complete file are to be rendered...
背景图片等也是如此.
这篇关于将CSS背景图像设置为嵌入式SVG符号?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文