Setting a css background image to an inline SVG symbol?

不羁的心 提交于 2021-01-16 12:29:59

问题


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

background-image: url(Icon.svg);

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

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

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

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

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>

回答1:


An image must be a complete file.

From the SVG specification...

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

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.

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.




回答3:


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

<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

CSS:

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

HTML:

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


来源:https://stackoverflow.com/questions/28477256/setting-a-css-background-image-to-an-inline-svg-symbol

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!