21: Zwei Farben in einem Use bekommen

Wir haben gelernt, dass eine Einschränkung bei der Verwendung von <use> zum Einfügen eines SVG-Teils darin besteht, dass Sie keine zusammengesetzten CSS-Selektoren schreiben können, die dort durchgreifen. Zum Beispiel

<svg class="parent">
  <!-- shadow DOM boundary is effectively here -->
  <use class="child">
     <!-- stuff <use> references gets cloned in here --> 
  </use>
  <!-- end shadow DOM boundary -->
</svg>

Diese Shadow DOM-Grenze verhindert, dass Selektoren wie

/* nope */
.parent .child {
}

funktionieren. Vielleicht erhalten wir eines Tages einen funktionierenden CSS-Selektor, der diese Shadow DOM-Grenze durchdringt, aber zum Zeitpunkt des Schreibens ist er noch nicht vorhanden.

Sie können die Füllung immer noch auf das <svg>-Elternelement setzen, und diese wird nach unten durchgereicht, aber das liefert Ihnen nur eine Farbe (denken Sie daran, das präsentationsbedingte fill-Attribut bei diesen Formen nicht zu setzen!).

Fabrice Weinberg dachte sich jedoch eine nette kleine Technik aus, um zwei Farben zu erzielen, indem er das currentColor-Schlüsselwort in CSS ausnutzte.

Setzen Sie die Füll-CSS-Eigenschaft bei beliebigen Formen auf currentColor

.shape-1, .shape-2 {
  fill: currentColor;
}

Auf diese Weise wird beim Setzen der color-Eigenschaft auf dem übergeordneten <svg>-Element diese ebenfalls durchgereicht. Sie bewirkt allein nichts (es sei denn, Sie haben <text> darin), aber currentColor basiert auf color, sodass 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 sich den Pen CodePen Logo als Inline-SVG von Chris Coyier (@chriscoyier) auf CodePen an.