Wir haben gelernt, dass eine Einschränkung beim Einfügen von SVG darin besteht, dass Sie keine zusammengesetzten CSS-Selektoren schreiben können, die sich dort auswirken. Zum Beispiel:
Diese Schatten-DOM-Grenze verhindert Selektoren wie
/* nope */ .parent .child ( )von der Arbeit. Vielleicht bekommen wir eines Tages einen funktionierenden CSS-Selektor, der diese Schatten-DOM-Grenze durchdringt, aber zum jetzigen Zeitpunkt ist er noch nicht hier.
Sie können die Füllung immer noch für das übergeordnete Element festlegen, und das wird sich durchziehen, aber das bringt Ihnen nur eine Farbe (denken Sie daran, das Präsentationsattribut fillfür diese Formen nicht festzulegen!).
Fabrice Weinberg dachte an eine nette kleine Technik, um zwei Farben zu erhalten, wobei er das currentColorSchlüsselwort in CSS ausnutzte .
Legen Sie die Füll-CSS-Eigenschaft für beliebige Formen auf currentColor fest:
.shape-1, .shape-2 ( fill: currentColor; )Auf diese Weise wird auch die Farbeigenschaft für das übergeordnete Element kaskadiert. Es macht nichts von alleine (es sei denn, Sie haben es drin ), sondern currentColorbasiert darauf, colordamit Sie es für andere Dinge verwenden können.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Sehen Sie das Pen CodePen-Logo als Inline-SVG von Chris Coyier (@chriscoyier) auf CodePen.