it-swarm.com.de

Ein CSS-Hintergrundbild auf ein Inline-SVG-Symbol setzen?

Ich weiß, dass externe SVG-Dateien mit Hintergrundbildern verknüpft werden können:

background-image: url(Icon.svg);

und Symbol-IDs können aus einer externen Svg-Datei ausgewählt werden:

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

aber wie kann ich ein hintergrundbild auf ein inlinesvg-symbol setzen? (Wie nachstehend) 

Meine svg befindet sich oben in meinem Webseiten-Body und nicht in einer externen Datei.

Ich möchte, dass .test-Hintergrundbild das #Icon-Menu-Symbol ist.

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

25
DreamTeK

Ein Bild muss eine vollständige Datei sein.

Aus der SVG-Spezifikation ...

Das Element 'image' gibt an, dass der Inhalt einer vollständigen Datei gerendert werden soll ...

Gleiches gilt für Hintergrundbilder usw.

4
Robert Longson

@ Robert Longson

stimmt. Aber Sie können es auf diese Weise machen ... Aber das Symbol ist nicht so, wie es funktionieren wird. Leider müssen Sie "g" oder so etwas als Referenz verwenden.

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

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

Es wird nicht funktionieren, wenn sich das svg im Markup befindet.

4
Type-Style

(1) Eine Möglichkeit mit inline SVG wäre die Verwendung von Symbolen und der absoluten DIV-Schichtung:

<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) Die zweite Lösung wäre die Verwendung einer Daten-URI: Hier gibt es eine gute Information: https://css-tricks.com/using-svg/Online-Konvertierungstool von Mobilefish.com

CSS:

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

HTML:

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