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

Question

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

background-image: url(Icon.svg);

和符号id可以从外部svg文件中定位:

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

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

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

我希望.test背景图像成为#Icon-Menu符号.

.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>

Answer 1

图像必须是完整的文件。

从SVG规范 ...

'image'元素表示要渲染完整文件的内容...

背景图像等也是如此。

Answer 2

罗伯特·朗森

那就对了。但是您可以通过这种方式做到。但是符号不是它起作用的方式。不幸的是，您必须使用“ g”或类似的东西进行引用。

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

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

如果svg位于标记中，则它将不起作用。