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

Question

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

background-image: url(Icon.svg);

符号 ID 可以从外部 svg 文件中定位：

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

但是如何将背景图像设置为 inline 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 specification...

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

背景图片等也是如此

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 在标记中，它将不起作用。

Answer 3

(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]">

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

Setting a css background image to an inline SVG symbol?

html

css

icons

svg