Einst erzählte mir jemand, dass sein größtes Problem mit SVG-Icons darin besteht, dass sie nicht mit der Farbe des umgebenden Textes übereinstimmen. Tatsächlich war das für ihn ein so großes Problem, dass er trotz der Vorteile von SVG-Icons bei Icon-Schriften blieb. Ich habe damals nicht darüber nachgedacht, aber dafür gibt es eine ziemlich einfache Lösung.
Die Idee ist, den currentColor-Wert in CSS zu verwenden, um diese Textfarbe an die SVG-Formen weiterzugeben. Zum Beispiel
<h1>
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-phone"></use>
</svg>
Call Me
</h1>h1 {
color: blue;
}
h1 svg {
fill: currentColor;
}Sie können dies vereinfachen und die Füllung auf das SVG kaskadieren lassen
h1 {
color: blue;
fill: currentColor;
}Die Füllung kaskadiert also, na? Ziemlich schick. Warum machen wir das nicht einfach, wenn es so einfach ist?
body {
fill: currentColor;
}fill beeinflusst sowieso nur SVG, daher wird es nichts tun, was wir nicht wollen, und es kann leicht durch einen spezifischeren Selektor überschrieben werden.
Das Problem ist, dass das so noch nicht ganz funktioniert.
Nehmen Sie dieses Beispiel, das einfach unser ursprüngliches Beispiel innerhalb von <body> ist
<body>
<h1>
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-phone"></use>
</svg>
You'd think the SVG would fill blue too?
</h1>
</body>Dann
body {
fill: currentColor;
color: red;
}
h1 {
color: blue;
}
svg {
border: 5px solid currentColor;
}Was ist die currentColor am <svg>? blau, richtig? Weil color kaskadiert (vererbt wird). Wir sehen, dass das stimmt, weil der Rand dieses SVGs blau sein wird. Aber das Icon selbst (das eigentlich ein gezeichnetes <path> ist) wird rot.
Merkwürdig, finde ich.
Es ist aber keine riesige Sache, denn Sie können einfach
svg {
fill: currentColor;
}Und das stellt sicher, dass es die Farbe von dem nimmt, was man normalerweise erwarten würde. Sie können die Füllung auch auf das use, path, symbol, circle, rect usw. anwenden, aber wenn man das svg trifft, deckt es im Grunde alles ab (was für einfache einfarbige Anwendungsfälle schön ist).
Siehe den Pen lcDBd von Chris Coyier (@chriscoyier) auf CodePen.
Interessant. Kann das irgendwie auch mit SVGs funktionieren, die als Hintergrundbilder geladen werden?
Ich vermute, Anker mit vordefinierten Farben im SVG-Dokument.
Ich habe so einen Trick schon mal gesehen, bei dem der Dateipfad so aussah: svg.svg?color=#f00 und etwas JavaScript innerhalb der .svg-Datei lief und sich selbst einfärbte.
Das ist cool, obwohl mich eine Lösung ohne JavaScript am meisten interessieren würde
Ich glaube nicht, dass es eine reine HTML/CSS-Lösung gibt.
Was ist mit SVG, das als Randbild verwendet wird?
Das würde die Schriftfarbe erben.
Ich weiß aber nicht, ob es wirklich nützlich ist...
Niiice. Sieht aus, als ob
currentColorauch in IE9+ funktioniert ( genauso wie einfaches SVG), daher ist dies eine großartige Verwendung für diesen Wert. Gerade als ich davon überzeugt war, dasscurrentColorziemlich nutzlos ist, hast du mich eines Besseren belehrt. :) Danke!Da fill: nur SVG beeinflusst, schlägt es die w3.org CSS-Validierung. Sollte ich mir Sorgen machen???
Nein.
Großartig. Habe gestern einen Sneak Peek davon gesehen, als ich einen neuen Pen zusammenstellte.
Es ist wirklich schade, dass es nicht mit der externen Sprite-Methode funktioniert. Wenn es eine Möglichkeit gäbe, SVG in einer externen Datei für das Caching zu belassen und Dinge wie fill darauf funktionieren zu lassen, wäre ich ein sehr glücklicher Mensch.
So wie es ist, überlege ich immer noch hin und her, ob ich SVG inline verwenden und alle Styling-Vorteile nutzen soll oder extern mit Caching.
Ich schätze es sehr, dass du all diese SVG-Sachen behandelst, Chris! Du könntest zu diesem Zeitpunkt ein ganzes Buch darüber schreiben.
Hallo Chris,
Ich habe mich gefragt, ob man eine SVG-Datei in ein Div legen und sie dann responsiv machen kann. Ich habe D3 (Bibliothek) Kollisionserkennungsbälle auf der Homepage von http://topgravity.com/ verwendet, aber das Problem ist, dass ich die Breite und Höhe dieses SVGs nicht auf Bildschirmgröße einstellen kann. Wenn ich Breite und Höhe erhöhe, entsteht eine sehr schlechte Benutzeroberfläche bei kleinen Bildschirmen. Ich möchte, dass sie mit der Bildschirmgröße responsiv ist. Könnten Sie mir bitte einige Vorschläge geben, wenn möglich?
Toller Artikel, ich habe einmal einen Gradienten in ein Logo im SVG-Format eingefügt, ich schätze, das geht darüber hinaus und bietet einige Möglichkeiten für weitere Experimente. Toller Trick.