Ich möchte diese Technik http://css-tricks.com/svg-fallbacks/ verwenden und die SVG-Farbe ändern, konnte dies aber bisher nicht. Ich habe dies in die CSS gestellt, aber mein Bild ist immer schwarz, egal was passiert. Mein Code:
.change-my-color {
fill: green;
}
<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
Antworten:
Auf diese Weise können Sie die Farbe eines Bildes nicht ändern. Wenn Sie SVG als Bild laden, können Sie nicht ändern, wie es mit CSS oder Javascript im Browser angezeigt wird.
Wenn Sie Ihr SVG - Datei ändern möchten, müssen Sie es laden verwenden
<object>
,<iframe>
oder mit<svg>
Inline.Wenn Sie die Techniken auf der Seite verwenden möchten, benötigen Sie die Modernizr-Bibliothek, in der Sie nach SVG-Unterstützung suchen und ein Fallback-Bild bedingt anzeigen oder nicht. Sie können dann Ihre SVG einbinden und die gewünschten Stile anwenden.
Sehen :
Code-Snippet anzeigen
Sie können Ihre SVG inline setzen und Ihr Fallback-Bild mit einem Klassennamen (
my-svg-alternate
) versehen:Verwenden Sie in CSS die
no-svg
Klasse von Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ), um nach SVG-Unterstützung zu suchen. Wenn keine SVG-Unterstützung vorhanden ist, wird der SVG-Block ignoriert und das Bild angezeigt. Andernfalls wird das Bild aus dem DOM-Baum entfernt (display: none
):Dann können Sie die Farbe Ihres Inline-Elements ändern:
quelle
object
SVGs nicht aus dem Hosting-Dokument formatieren.2020 Antwort
Der CSS-Filter funktioniert in allen aktuellen Browsern
So ändern Sie die Farbe von SVGs
<img>
Tag hinzu.Die Ausgabe für
#00EE00
ist beispielsweisefilter
zu dieser Klasse hinzu.quelle
brightness(0) saturate(100%)
zum Anfang der Filterliste zunächst zu 100% schwarz, sodass die anderen Filter es in die richtige Farbe ändern können.Um die Farbe eines SVG zu ändern, können Sie den SVG-Code direkt ändern, indem Sie die SVG- Datei in einem beliebigen Texteditor öffnen . Der Code kann wie folgt aussehen
Sie können beobachten, dass es einige XML-Tags wie Pfad, Kreis, Polygon usw. Gibt . Dort können Sie Ihre eigene Farbe mit Hilfe von Add - Stil - Attribute . Schauen Sie sich das folgende Beispiel an
Fügen Sie allen Tags das Stilattribut hinzu, damit Sie Ihr SVG mit der gewünschten Farbe erhalten
quelle
fill
:fill = "#AB7C94"
? Nicht sicher, warum dasstyle
Attribut benötigt wirdEine Testseite wurde hinzugefügt, um SVG über Filtereinstellungen einzufärben:
Z.B
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
Laden Sie Ihre SVG - Jsfiddle hoch und färben Sie sie
Die Idee stammt von: https://blog.union.io/code/2017/08/10/img-svg-fill/
quelle
.custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}
habe genau den Job gemacht, den ich brauche, um das Symbol zu deaktivieren.Nur SVG mit Pfadinformationen . Sie können das nicht mit dem Bild machen. Als Pfad können Sie den Strich ändern und Informationen füllen, und Sie sind fertig. wie Illustrator
so: via CSS Sie Pfad überschreiben
fill
WertAber wenn Sie eine flexiblere Methode wünschen, da Sie diese mit einem Text ändern möchten, wenn ein Schwebeeffekt auftritt
quelle
Der einfachste Weg wäre, eine Schriftart aus der SVG mit einem Dienst wie https://icomoon.io/app/#/select oder ähnlichem zu erstellen . Laden Sie Ihre SVG-Datei hoch, klicken Sie auf "Schriftart generieren", fügen Sie Schriftarten und CSS in Ihre Seite ein und verwenden und formatieren Sie sie einfach wie jeden anderen Text. Ich benutze es immer so, weil es das Styling viel einfacher macht.
BEARBEITEN: Wie in dem von @ CodeMouse92 kommentierten Artikel erwähnt, bringen Schriftarten Bildschirmleser durcheinander (und sind möglicherweise schlecht für SEO). Also bleib lieber bei den SVGs.
quelle
Sie können die SVG-Farbe mit CSS ändern, wenn Sie einige Tricks anwenden. Ich habe dafür ein kleines Skript geschrieben.
Der obige Code funktioniert möglicherweise nicht richtig. Ich habe ihn für Elemente mit einem SVG-Hintergrundbild implementiert, das fast ähnlich funktioniert. Trotzdem müssen Sie dieses Skript an Ihren Fall anpassen. hoffe es hat geholfen.
quelle
Die SVG- Maske auf einem Box-Element mit einer Hintergrundfarbe ergibt:
Hinweis - SVG-Masken werden in Internet Explorer- Browsern nicht unterstützt
quelle
Zielen Sie auf den Pfad innerhalb des SVG:
Sie können inline tun, wie:
Oder
quelle
So ändern Sie einfach die Farbe des SVG:
Gehen Sie zur SVG-Datei und geben Sie unter Stile die Füllfarbe an.
quelle
Wenn Sie dies mit einem Inline-SVG tun möchten, das beispielsweise ein Hintergrundbild in Ihrem CSS ist:
Ersetzen Sie natürlich das ... durch Ihren Inline-Bildcode
quelle
Zum Beispiel in Ihrem HTML:
Verwenden Sie jQuery:
quelle
Tatsächlich gibt es eine flexiblere Lösung für dieses Problem: Schreiben einer Webkomponente, die SVG zur Laufzeit als Text patcht. Auch im Kern mit einem Link zu JSFiddle veröffentlicht
quelle
kürzester Bootstrap-kompatibler Weg, kein JavaScript:
und benutze es wie:
quelle
Öffnen Sie Ihr Bild mit einem Browser, klicken Sie mit der rechten Maustaste auf das Bild, klicken Sie auf Seitenquelle anzeigen, und Sie sehen das SVG-Tag des Bildes. Cope und füge es in dein HTML ein und ändere dann die Füllung in die Farbe deiner Wahl
quelle
Fügen Sie einfach fill: "requiredColor" in das svg-Tag des Bildes ein: Beispiel:
quelle