将css背景图像设置为内联SVG符号?

I know external svg files can be linked to background images:

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

background-image: url(Icon.svg);

and symbols id's can be targeted from an external svg file:

符号id可以从外部svg文件中获取:

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

but how can I set a background image to an inline svg symbol? (As below)

但是如何将背景图像设置为内联的svg符号呢?(如下)

My svg is at the top of my web page body and not in an external file.

svg位于web页面主体的顶部，而不是在外部文件中。

I want .test background image to be the #Icon-Menu symbol.

我希望。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 个解决方案

#1

An image must be a complete file.

图像必须是一个完整的文件。

From the SVG specification...

从SVG规范…

The ‘image’ element indicates that the contents of a complete file are to be rendered...

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

The same is true for background-image etc.

背景图像等也是如此。

#2

@Robert Longson

thats right. But you can do it this way. But symbol is not the way it will work. Unfortunatly you have to use "g" or something like that to reference.

这是正确的。但是你可以这样做。但符号不是它工作的方式。不幸的是，你必须用“g”或类似的词来指代。

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

http://codepen.io/Type-Style/pen/ByvKJq

It will not work if the svg is in the Markup.

如果svg在标记中，则不会工作。

#3

(1) one possible way with inline SVG would be to use symbols and DIV absolute layering:

(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) Second solution would be to use a Data URI: there is a good info here: https://css-tricks.com/using-svg/ using this tool: Mobilefish.com online conversion tool

(2)第二个解决方案是使用一个数据URI:这里有一个很好的信息:https://css-trick .com/using-svg/使用这个工具:Mobilefish.com在线转换工具

CSS:

.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

HTML:

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

#1