Ändern Sie die Farbe von SVG beim Schwebe

SVG verfügt über verschiedene Anwendungsmethoden, und nach verschiedenen Anwendungsmethoden sind auch die Farbstrategien für die Änderung von SVG in verschiedenen Zuständen (Schwebezeuge: HOVER, Aktivierung: Active, Focus: Focus, Klassennamenänderung usw.) unterschiedlich. Schauen wir es uns getrennt an:

Inline SVG

Inline SVG ist meine persönliche Lieblingsmethode, um SVG zu verwenden, teilweise, weil es einfach zugänglich ist und stylen kann.

Wenn Sie es gewohnt sind, Symbolschriften zu verwenden, mögen Sie möglicherweise ein wenig von ihrer einfachen Farbänderung. Icon -Schriftarten sind etwas auf Monochrom beschränkt, während SVG es nicht ist, aber es ist jedoch sehr einfach, das Monochrom der Ikone -Schriftart zu ändern. Mithilfe von Inline SVG können Sie die fill -Eigenschaft festlegen, die auf alle Elemente innerhalb des SVG kaskadiert oder jedes Element bei Bedarf separat füllen kann.

SVG -Symbole/Verwendung

Es gibt ein sogenanntes SVG-Sprite-Diagramm, bei dem es sich um eine Reihe von Konvertierungen handelt<symbol></symbol> SVG des Elements, damit ein bestimmtes Symbol passieren kann<use></use> Elemente werden leicht referenziert.

Sie können die Füllfarbe immer noch einfach über externes CSS einstellen, aber es gibt einige Hinweise:

• Interne SVG -Elemente (z.<path></path> ) selbst kann ohne Polsterung sein. Dadurch kann die Polsterung aus dem übergeordneten SVG -Set auf kaskadieren<use></use> Der Schattendom erstellt. Sobald du drin bist<symbol></symbol> Ähnlich hinzugefügt<path ... fill="blue"></path> Sie verlieren die Kontrolle über externe CSS.
• Auch hier können Sie die Füllung einzelner Elemente innerhalb des SVG wie bei Inline SVG nicht kontrollieren. Dies bedeutet, dass Sie sich im Grunde in einem monochromen Bereich befinden. Dies deckt die meisten Anwendungsfälle ab, ist aber immer noch eine Einschränkung.

SVG -Hintergrundbild

SVG kann als Hintergrundbild wie PNG, JPG oder ein anderes Grafikformat festgelegt werden. Zu diesem Zeitpunkt geben Sie im Grunde die Fähigkeit auf, die Füllung zu ändern. Eine Möglichkeit (ich denke nicht, dass es besonders gut ist) besteht darin, zwei Versionen für jeden Grafikstandard zu erstellen, verschiedene Farben zu verwenden und dann zwischen ihnen zu wechseln:

Ich werde Sie nicht beschuldigen, wenn Sie die Ressourcen nicht wechseln möchten. Eine andere Möglichkeit besteht darin, komplexe Filter zu verwenden.

Der richtige Filter, um die richtige Farbe zu erhalten, ist eine schwierige Sache. Zum Glück hat Barrett Sonntag ein Tool erstellt, mit dem Sie Filter berechnen können! Das Umwandeln invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) Schwarz in Rot endet mit einer seltsamen Kombination, wie z.

SVG hat auch eine object , die in der Vergangenheit sehr präzise war, da es einen eingebauten Fallback-Mechanismus hatte-obwohl die Browser-Unterstützung heutzutage sehr gut ist, habe ich es ehrlich gesagt nie verwendet. Wenn Sie es jedoch verwenden, müssen Sie diese Filtertechnik möglicherweise verwenden, um die Farbe beim Schweben zu wechseln.

Verwenden Sie Maske anstelle von Hintergrundbild

Auf diese Weise ist SVG immer noch dafür verantwortlich, die Form zu zeichnen, aber die Farbe kommt von der Hintergrundfarbe dahinter (oder Bild! Oder Gradient!) Und nicht die SVG selbst.

SVG -Hintergrundbild als Daten -URL

Dies unterscheidet sich nicht viel von der obigen Methode, bietet jedoch eine interessante Möglichkeit: Verwenden Sie Variablen für interne Polsterung. Hier ist ein Beispiel für die Verwendung von SASS, um die URL als Variable zu halten:

Sie können auch native CSS -benutzerdefinierte Eigenschaften verwenden, um dies zu erreichen!

Das obige ist der detaillierte Inhalt vonÄndern Sie die Farbe von SVG beim Schwebe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!