Dies ist eine Selbst-Q & A eines praktischen Codes, den ich mir ausgedacht habe.
Derzeit gibt es keine einfache Möglichkeit, ein SVG-Bild einzubetten und dann über CSS auf die SVG-Elemente zuzugreifen. Es gibt verschiedene Methoden zur Verwendung von JS SVG-Frameworks, die jedoch zu kompliziert sind, wenn Sie lediglich ein einfaches Symbol mit einem Rollover-Status erstellen.
Hier ist also, was ich mir ausgedacht habe, was meiner Meinung nach der mit Abstand einfachste Weg ist, SVG-Dateien auf einer Website zu verwenden. Es basiert auf den frühen Methoden zum Ersetzen von Text zu Bild, wurde jedoch meines Wissens noch nie für SVGs durchgeführt.
Das ist die Frage:
Antworten:
Verwenden Sie zunächst ein IMG-Tag in Ihrem HTML-Code, um eine SVG-Grafik einzubetten. Ich habe Adobe Illustrator verwendet, um die Grafik zu erstellen.
Dies ist genau so, wie Sie ein normales Bild einbetten würden. Beachten Sie, dass Sie den IMG so einstellen müssen, dass er eine Klasse von svg hat. Die 'Social-Link'-Klasse dient nur als Beispiel. Die ID ist nicht erforderlich, aber nützlich.
Verwenden Sie dann diesen jQuery-Code (in einer separaten Datei oder inline im HEAD).
Der obige Code sucht nach allen IMGs mit der Klasse 'svg' und ersetzt sie durch die Inline-SVG aus der verknüpften Datei. Der große Vorteil besteht darin, dass Sie CSS verwenden können, um die Farbe des SVG jetzt wie folgt zu ändern:
Der von mir geschriebene jQuery-Code portiert auch die ID und Klassen der Originalbilder. Also funktioniert dieses CSS auch:
Oder:
Ein Beispiel dafür finden Sie hier: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
Wir haben eine kompliziertere Version, die das Caching hier beinhaltet: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
quelle
});
von $ .get durch}, 'xml');
img[src$=".svg"]
und die Notwendigkeit für diesvg
Klasse beseitigen .$('#ico_company path').removeAttr('fill')
. Dann könnten Sie#ico_company { fill: #ccc }
in Ihrer CSS-DateiStil
Skript
quelle
width="170.667"
in meinem Fallpath
Formen (wierect
) besteht, diese auch in CSS verarbeiten müssenSie können die CSS-
filter
Eigenschaft jetzt in den meisten modernen Browsern verwenden (einschließlich Edge, jedoch nicht IE11). Es funktioniert sowohl mit SVG-Bildern als auch mit anderen Elementen. Sie können Farben verwendenhue-rotate
oderinvert
ändern, obwohl Sie damit nicht unabhängig voneinander verschiedene Farben ändern können. Ich verwende die folgende CSS-Klasse, um eine "deaktivierte" Version eines Symbols anzuzeigen (wobei das Original ein SVG-Bild mit gesättigten Farben ist):Dies macht es in den meisten Browsern hellgrau. Im IE (und wahrscheinlich in Opera Mini, das ich nicht getestet habe) wird es durch die Opazitätseigenschaft merklich ausgeblendet, die immer noch ziemlich gut aussieht, obwohl sie nicht grau ist.
Hier ist ein Beispiel mit vier verschiedenen CSS-Klassen für das Twemoji- Glockensymbol: Original (gelb), die oben genannte "deaktivierte" Klasse
hue-rotate
(grün) undinvert
(blau).Code-Snippet anzeigen
quelle
if ($('.w3-top img').css("color") == "rgb(0, 0, 0)") { $('.w3-top img').css("filter", "invert(100%)"); $('.w3-top img').css("-webkit-filter", "invert(100%)"); };
Alternativ können Sie CSS verwenden
mask
. Die gewährte Browserunterstützung ist nicht gut, Sie können jedoch einen Fallback verwendenquelle
-webkit-mask
es auf keiner Produktionswebsite verwendet werden darf.Wenn Sie Dateien (PHP-Include oder Include über das CMS Ihrer Wahl) in Ihre Seite aufnehmen können, können Sie den SVG-Code hinzufügen und in Ihre Seite aufnehmen. Dies funktioniert genauso wie das Einfügen der SVG-Quelle in die Seite, macht jedoch das Seitenmarkup sauberer.
Der Vorteil ist, dass Sie Teile Ihrer SVG über CSS auf Hover ausrichten können - kein Javascript erforderlich.
http://codepen.io/chriscoyier/pen/evcBu
Sie müssen nur eine CSS-Regel wie die folgende verwenden:
Beachten Sie, dass das
!important
Bit erforderlich ist, um die Füllfarbe zu überschreiben.quelle
<div ng-include="'svg.svg'"></div>
#pathidorclass:hover, .wrapperclass:hover #pathidorclass { fill: green; }
Oder eliminieren Sie einfach den ursprünglichen Schwebeflug des SVG-Pfads, da Sie ihn jetzt ohnehin über das Wrapper-Element anvisieren.@Drew Baker gab eine großartige Lösung, um das Problem zu lösen. Der Code funktioniert ordnungsgemäß. Diejenigen, die AngularJs verwenden, können jedoch eine große Abhängigkeit von jQuery feststellen. Aus diesem Grund hielt ich es für eine gute Idee, für AngularJS-Benutzer einen Code einzufügen, der der Lösung von @Drew Baker folgt.
AngularJs Weg des gleichen Codes
1. HTML : Verwenden Sie das folgende Tag in Ihrer HTML-Datei:
2. Direktive : Dies ist die Direktive, die Sie benötigen, um das Tag zu erkennen:
3. CSS :
4. Unit-Test mit Karma-Jasmin :
quelle
<div ng-include="/icons/my.svg" class="any-class-you-wish"></div>
ng-include
dann ändern Sie einfach diese Zeilevar imgURL = element.attr('src');
invar imgURL = element.attr('ng-include');
if (typeof(imgClass) !== 'undefined') { $svg.setAttribute("class", imgClass); }
anstelle von split und for loop verwenden.angular.element(data)[0];
) abrufen und es mit dem IE verwendenif ($svg.getAttribute('class')) { $svg.setAttribute('class', $svg.getAttribute('class') + ' ' + imgClass); } else { $svg.setAttribute('class', imgClass); }
. Möglicherweise möchten Siecache: true
auch die Optionen hinzufügen , da$http.get
sonst Ihre Seite möglicherweise sehr langsam wird.Mir ist klar, dass Sie dies mit CSS erreichen möchten, aber nur zur Erinnerung, falls es sich um ein kleines, einfaches Bild handelt - Sie können es jederzeit in Notepad ++ öffnen und den Pfad / die Füllung des beliebigen Elements ändern:
Es könnte eine Menge hässlicher Schriften retten. Es tut uns leid, wenn es nicht auf der Basis ist, aber manchmal können die einfachen Lösungen übersehen werden.
... selbst das Austauschen mehrerer SVG-Bilder ist möglicherweise kleiner als einige der Codefragmente für diese Frage.
quelle
Ich habe eine Anweisung geschrieben, um dieses Problem mit AngularJS zu lösen. Es ist hier verfügbar - ngReusableSvg .
Es ersetzt das SVG-Element nach dem Rendern und platziert es in einem
div
Element, sodass das CSS leicht geändert werden kann. Dies hilft bei der Verwendung derselben SVG-Datei an verschiedenen Orten mit unterschiedlichen Größen / Farben.Die Verwendung ist einfach:
Danach können Sie leicht haben:
quelle
TL / DR: GO here-> https://codepen.io/sosuke/pen/Pjoqqp
Erläuterung:
Ich gehe davon aus, dass Sie HTML wie folgt haben:
Gehen Sie auf jeden Fall die Filterroute, dh. Ihr SVG ist höchstwahrscheinlich schwarz oder weiß. Sie können einen Filter anwenden, um die gewünschte Farbe zu erhalten. Ich habe beispielsweise ein schwarzes SVG, das mintgrün sein soll. Ich invertiere es zuerst in Weiß (was technisch gesehen alle RGB-Farben sind) und spiele dann mit der Farbsättigung usw. Um es richtig zu machen:
Noch besser ist, dass Sie einfach ein Tool verwenden können, um das gewünschte Hex in einen Filter für Sie zu konvertieren: https://codepen.io/sosuke/pen/Pjoqqp
quelle
Hier ist eine Version
knockout.js
basierend auf der akzeptierten Antwort:Wichtig: Für das Ersetzen ist tatsächlich auch jQuery erforderlich, aber ich dachte, es könnte für einige nützlich sein.
Dann bewerben
data-bind="svgConvert: true"
Sie sich einfach auf Ihr img-Tag.Diese Lösung ersetzt das
img
Tag vollständig durch ein SVG und zusätzliche Bindungen werden nicht berücksichtigt.quelle
get
erneut anfordern würde. Ich überlegte, das Attribut auf dem Tagsrc
in eindata-src
Attribut zu ändernimg
, kam jedoch zu dem Schluss, dass moderne Browser wahrscheinlich klug genug sind, um die Datei trotzdem zwischenzuspeichernHier ist ein Code ohne Framework, nur reines js:
quelle
Es gibt eine Open-Source-Bibliothek namens SVGInject, die das
onload
Attribut verwendet, um die Injektion auszulösen. Sie finden das GitHub-Projekt unter https://github.com/iconfu/svg-injectHier ist ein minimales Beispiel für die Verwendung von SVGInject:
Nach dem Laden des Bildes
onload="SVGInject(this)
löst das die Injektion aus und das<img>
Element wird durch den Inhalt der imsrc
Attribut bereitgestellten SVG-Datei ersetzt .Es löst mehrere Probleme mit der SVG-Injektion:
SVGs können ausgeblendet werden, bis die Injektion beendet ist. Dies ist wichtig, wenn bereits während der Ladezeit ein Stil angewendet wird, der andernfalls einen kurzen "nicht gestylten Inhaltsblitz" verursachen würde.
Die
<img>
Elemente injizieren sich automatisch. Wenn Sie SVGs dynamisch hinzufügen, müssen Sie sich keine Gedanken mehr über das erneute Aufrufen der Injektionsfunktion machen.Jeder ID in der SVG wird eine zufällige Zeichenfolge hinzugefügt, um zu vermeiden, dass dieselbe ID mehrmals im Dokument enthalten ist, wenn eine SVG mehr als einmal injiziert wird.
SVGInject ist einfaches Javascript und funktioniert mit allen Browsern, die SVG unterstützen.
Haftungsausschluss: Ich bin Mitautor von SVGInject
quelle
Wenn wir eine größere Anzahl solcher SVG-Bilder haben, können wir auch die Hilfe von Schriftdateien verwenden.
Auf Websites wie https://glyphter.com/ können wir eine Schriftartdatei von unseren SVGs erhalten.
Z.B
quelle
Sie können dafür ein Datenbild verwenden. Mit Data-Image (Daten-URI) können Sie wie inline auf SVG zugreifen.
Hier ist der Rollover-Effekt mit reinem CSS und SVG.
Ich weiß, dass es chaotisch ist, aber Sie können dies auf diese Weise tun.
Hier können Sie Ihre SVG in Daten-URL konvertieren
quelle
Da SVG im Grunde genommen Code ist, benötigen Sie nur Inhalte. Ich habe PHP verwendet, um Inhalte zu erhalten, aber Sie können verwenden, was Sie wollen.
Dann habe ich den Inhalt "wie er ist" in einem div-Container gedruckt
Um die Regel endgültig auf die SVG-Childs des Containers in CSS festzulegen
Ich habe diese Ergebnisse mit einem Material-Symbol SVG erhalten:
quelle
Die ausgewählte Lösung ist in Ordnung, wenn jQuery alle SVG-Elemente in Ihrem DOM verarbeiten soll und Ihr DOM eine angemessene Größe hat. Wenn Ihr DOM jedoch groß ist und Sie sich entscheiden, Teile Ihres DOM dynamisch zu laden, ist es wirklich nicht sinnvoll, das gesamte DOM erneut zu scannen, um nur SVG-Elemente zu aktualisieren. Verwenden Sie dazu stattdessen ein jQuery-Plugin:
Geben Sie in Ihrem HTML-Code ein SVG-Element wie folgt an:
Und wende das Plugin an:
quelle
Für: Hover-Ereignisanimationen können wir die Stile in der SVG-Datei belassen, z
Überprüfen Sie dies auf svgshare
quelle