Vi lærte, at en begrænsning for at indsætte en smule SVG er, at du ikke kan skrive sammensatte CSS-vælgere, der påvirker der igennem. For eksempel:
Denne skygge DOM-grænse forhindrer vælgere som
/* nope */ .parent .child ( )fra at arbejde. Måske får vi en dag en fungerende CSS-vælger til at trænge igennem den skygge DOM-grænse, men i skrivende stund er den ikke her endnu.
Du kan stadig indstille fyldet på forældren, og det vil kaskade ned igennem, men det får dig kun en farve (husk at ikke indstille præsentationsattributten fillpå disse figurer!).
Fabrice Weinberg tænkte på en pæn lille teknik til at få to farver dog ved at udnytte currentColornøgleordet i CSS.
Indstil udfyldnings-CSS-egenskaben på de figurer, du gerne vil have til aktuelle farve:
.shape-1, .shape-2 ( fill: currentColor; )På den måde når du indstiller farveegenskaben på den overordnede , vil det også kaskade igennem. Det gør ikke noget i sig selv (medmindre du er derinde), men currentColorer baseret på, colorså du kan bruge det til andre ting.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Se Pen CodePen-logoet som Inline SVG af Chris Coyier (@chriscoyier) på CodePen.