Mögliche Duplizieren:
Changing SVG image color with javascriptWie kann ich die Farbe eines SVG-Bildes bei Hover ändern?
Ich möchte die Füllung eines SVG-Bild ändern, wenn ich den Mauszeiger über sie.
Im Moment habe ich ein schwarzes Fragezeichen aus Illustrator nach SVG exportiert. Ich kann meine Seite mit dem IMG-Tag und es zeigt gut, aber ich habe keine Ahnung, wie Sie die Farbe im Code ändern.
SVG-Dateien geändert werden können direkt aus Javascript, dh Eigenschaften des "Bildes" sind aus dem DOM heraus zugänglich.
Blick auf diesen Beitrag von Stack-Überlauf: modify stroke and fill of svg image with javascript
Es ist wichtig zu erinnern, dass dies zu tun, können Sie die SVG-Datei in dem gemeinsamen HTML nicht beilegen * < img/> * Tag, verwenden Sie stattdessen die * < svg> * ... ** < /svg> wie in der Post gezeigt.
EDIT: svg on w3schools
ich einen Link zu w3schools hinzugefügt, so dass Sie mehrere Eigenschaften des svg Objekt
Have Fun
der Svg auf w3schools gibt 404 (Seite nicht gefunden). – Kaleab
Wenn Sie Ihren Code veröffentlichen können, können wir ihn möglicherweise für Sie beheben.
Versuchen Sie dies folgende: http://tutorials.jenkov.com/svg/svg-and-css.html
Alternativ (nicht exklusiv für SVG), diese Art von Code mit verschiedenen Bildern:
<img src="image1.svg"
onmouseover="this.src='image2.svg'"
onmouseout="this.src='image1.svg'">
Live-Demo: http://jsfiddle.net/JNChw/
Bildaustausch ist eine sehr ineffektive Methode, um eine Hover-Füllfarbe zu ändern (für den Fall SVG). –
Wenn Sie Sie tun müssen, Hover-Effekte in svg sehen kann, sollte nicht Verwenden Sie < img> Tags. Stattdessen verweisen Sie die SVG mit einem < iFrame>, < Objekt> oder < Embed> -Tag. Wenn Sie eine http GET-Anfrage speichern möchten, können Sie das svg-Markup in das HTML-Dokument einfügen.
Hier ist ein Beispiel, das einen einfachen Füll-Hover-Effekt zeigt inside an svg und another one (etwas komplexer, das eine Kontur bei Hover mit einem Filter erstellt). In jedem Fall geht es darum, eine: hover-CSS-Regel anzuwenden, um die Füllfarbe festzulegen.
Ein Beispiel mit allen oben genannten Möglichkeiten der Verwendung von Svg kann here gesehen werden.
Ich bin nicht vertraut mit SVGs, vielleicht können Sie die Hintergrundfarbe bei Hover ändern? Ich habe vor einiger Zeit so etwas für eine Aufgabe gemacht: http://bit.ly/Q1Irwv – BillyNair