Gibt es eine Möglichkeit, SVG als Inhalt in einem Pseudo-Element :: before oder :: after zu verwenden

Question

Ich möchte ::before verwenden, um SVG-Bilder vor einigen ausgewählten Elementen zu platzieren:

#mydiv::before {
  content: '';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

Der obige Code zeigt nur den Klartext an.
Ich habe die Spezifikation überprüft und es scheinen einige Einschränkungen zu geben, was content sein kann. Die Lösung mit der CSS content-Eigenschaft ist vorzuziehen.

Answer 1

Um dieses Thema weiter zu vertiefen. Wenn Sie Font Awesome 5 Icons hinzufügen möchten, müssen Sie etwas zusätzliches CSS hinzufügen.

Icons haben standardmäßig Klassen svg-inline--fa und fa-w-*.

Es gibt auch Modifikator-Klassen wie fa-lg, fa-rotate-* und andere. Sie müssen die Datei svg-with-js.css überprüfen und das entsprechende CSS dazu finden.

Sie müssen Ihre eigene Farbe zum CSS-Icon hinzufügen, da es standardmäßig schwarz ist, zum Beispiel fill='%23f00', wo %23 codiertes # ist.

h1::before{

  /* svg-inline--fa */
  display:inline-block;
  font-size:inherit;
  height:1em;
  overflow:visible;
  vertical-align:-.125em;

  /* fa-w-14 */
  width:.875em;

  /* Icon */
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f00' d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'%3E%3C/path%3E%3C/svg%3E");

  /* Margin */
  margin-right:.75rem;
}

Lorem Ipsum

Answer 2

Mit einem Hintergrundmaskenbild mit leerem Inhalt können Sie die Farbe über CSS steuern: (Vergessen Sie nicht die Position, Breite und Höhe, die Sie bevorzugen)...!

background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
content:'';

Answer 3

Pass auf, alle anderen Antworten haben ein Problem im IE.

Lass uns diese Situation haben - Button mit vorgestelltem Symbol. Alle Browser handeln dies korrekt ab, aber der IE nimmt die Breite des Elements und skaliert den Inhalt davor, um es anzupassen. JSFiddle

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}

Die Lösung besteht darin, die Größe des vorherigen Elements festzulegen und es dort zu belassen:

#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //nur eine Größe ist in Ordnung, IE skaliert gleichmäßig, um sie anzupassen
}

Die background-image + background-size Lösungen funktionieren auch, sind aber etwas unhandlich, da du die gleichen Größen zweimal angeben musst.

Das Ergebnis im IE11:

Answer 4

Auch wenn dies viele Jahre her ist, möchte ich dies auch teilen.

Die oben genannten Antworten sind korrekt, Sie können den codierten SVG-String direkt in das CSS-Content-Attribut einfügen. Wenn Sie Probleme mit der URL haben, liegt es möglicherweise an Leerzeichen und Sonderzeichen, die dafür nicht gültig sind. In diesem Fall fügen Sie Ihren decodierten SVG-Code unter folgender URL ein: https://mothereff.in/url

Verwenden Sie die codierte SVG-URL und es sollte funktionieren. Falsche & richtige Beispiele:

#incorrect::before {
  content: url(
    data:image/svg + xml,
    .cls-1{fill:#aeadad;}
  );
}

#correct::before {
  content: url(data:image/svg+xml,%0A%3Csvg%20id%3D%22Layer%5f1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.37%20188.41%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23aeadad%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%227.69%22%20cy%3D%227.69%22%20r%3D%227.69%22%2F%3E%3Crect%20class%3D%22cls-1%22%20x%3D%226.69%22%20y%3D%2227.72%22%20width%3D%222%22%20height%3D%22160.69%22%2F%3E%3C%2Fsvg%3E%0A);
}

Answer 5

Ich habe heute erst bemerkt, dass eine Zeitung hier direkte Injektion des SVG in die ::before und ::after Pseudo-Elemente verwendet, um stilisierte Zitate für hervorgehobene Inhalte im Artikel zu rendern. Ich habe versucht, das CMS dieser Zeitung über whatcms.org zu finden, aber erfolglos. Ich kann jedoch sagen, dass der Besitzer der Zeitung - ein großes nationales, sogar internationales Blatt - ein CMS namens DM Polopoly verwendet.

Es scheint viel aufwändiger zu sein, SVG-Daten in das Inhaltslement einzugeben, anstatt den Inhalt zu leeren und das SVG als Hintergrundbild zu verwenden. Ich frage mich, warum sie diese Methode gewählt haben - welcher Vorteil damit einherging. Ich habe einige Leute auf Google-Links gesehen, die sagten, es sei einfach, das SVG-Bild beim Schweben über das Pseudo-Element zu manipulieren. . . Aber ich habe kein überzeugendes Beispiel für diesen 'Vorteil' gesehen.

Dieser Artikel hat eine einfachere Methode zur Einfügung des SVG als Inhalt. Er verwendet eine Zoom-Eigenschaft, um die Größenanpassung für das Bild zu erhalten.