Ich möchte einige SVG-Bilder vor ausgewählten Elementen platzieren. Ich benutze JQuery, aber das ist irrelevant. Ich möchte das Element: before als:
#mydiv:before {
content:"<svg.. code here</svg>";
display:block;
width:22px;
height:10px;
margin:10px 5px 0 10px;
}
Wenn ich es wie oben gezeigt mache, wird nur die Zeichenfolge angezeigt. Ich habe die Spezifikationen überprüft und es scheint einige Einschränkungen hinsichtlich des Inhalts zu geben. Gibt es eine Lösung für diese Einschränkung? Nur der Inhalt CSS ist für meine Frage relevant.
Antworten:
Ja, du kannst! Habe das gerade getestet und es funktioniert großartig, das ist großartig! Es funktioniert immer noch nicht mit HTML, aber mit SVG.
In meiner index.html habe ich:
Und meine test.svg sieht so aus:
quelle
content: url(path/to/my.svg)
. Dies bedeutet jedoch nicht unbedingt, dass es mit der Tooltip-Bibliothek der jQuery-Benutzeroberfläche funktioniert.content: url(mysprite.svg#my-icon)
wird Ihr Symbol nicht aufgerufen. Ich würde mich jedoch gerne als falsch erweisen :)Ja. Sie können die SVG als Hintergrundbild eines leeren: after oder: before hinzufügen. Bitte schön:
quelle
background-size
dies in Opera Mini nicht unterstützt wird. Das ist so frustrierend.<?xml version="1.0" encoding="utf-8"?>
am Anfang meiner SVG-Datei hinzufügen , damit es funktioniert.Stellen Sie sicher, dass Ihr SVG keine doppelten Anführungszeichen enthält, und geben Sie keine # -Symbole ein.
quelle
url('file.svg')
funktioniert jedoch.xmlns='http://www.w3.org/2000/svg'
des Teils <svg>, um in Chrome 66.x zu funktionieren. Zum Beispiel - kleiner Chevron wird sein:content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
Die Verwendung von CSS-Sprites und Daten-Uri bietet zusätzliche interessante Vorteile wie schnelles Laden und weniger Anfragen UND wir erhalten IE8-Unterstützung durch die Verwendung von image / base64:
Codepen-Beispiel mit SVG
HTML
CSS
Ändern Sie für IE8 Folgendes:
quelle
scale svg
und Sie werden viele weitere Möglichkeiten findenPraktisches Tool für die SVG-Codierung von URL-Encodern
quelle
Seien Sie vorsichtig, alle anderen Antworten haben ein Problem im IE.
Lassen Sie uns diese Situation haben - Schaltfläche mit vorangestelltem Symbol. Alle Browser behandeln dies korrekt, aber der IE nimmt die Breite des Elements und skaliert den vorherigen Inhalt entsprechend. JSFiddle
Die Lösung besteht darin, die Größe auf vor dem Element zu setzen und es dort zu belassen, wo es ist:
Die
background-image
+background-size
-Lösungen funktionieren ebenfalls, sind jedoch wenig unhandlich, da Sie die gleichen Größen zweimal angeben müssen.Das Ergebnis in IE11:
quelle
Um dieses Thema weiter auszubauen. Wenn Sie Font Awesome 5- Symbole hinzufügen möchten, müssen Sie zusätzliches CSS hinzufügen.
Symbole haben standardmäßig Klassen
svg-inline--fa
undfa-w-*
.Es gibt auch Sonderklassen wie
fa-lg
,fa-rotate-*
und andere. Sie müssen diesvg-with-js.css
Datei überprüfen und das richtige CSS dafür finden.Sie müssen dem CSS-Symbol Ihre eigene Farbe hinzufügen, da es sonst standardmäßig schwarz ist, z. B.
fill='%23f00'
wo%23
es codiert ist#
.quelle
quelle