Vi lærte at en begrensning for å bruke for å sette inn litt SVG er at du ikke kan skrive sammensatte CSS-velgere som påvirker derfra. For eksempel:
Den skyggedom DOM-grensen hindrer velgere som
/* nope */ .parent .child ( )fra å jobbe. Kanskje en dag får vi en fungerende CSS-velger for å trenge inn i den skyggedom-grensen, men i skrivende stund er den ikke her ennå.
Du kan fremdeles stille fyll på foreldrene, og det vil kaskade nedover, men det gir deg bare en farge (husk å ikke angi presentasjonsattributtet fillpå disse figurene!).
Fabrice Weinberg tenkte på en fin liten teknikk for å få to farger skjønt, ved å utnytte currentColornøkkelordet i CSS.
Angi fyll CSS-egenskapen på alle former du vil ha til gjeldende farge:
.shape-1, .shape-2 ( fill: currentColor; )På den måten når du setter fargeegenskapen på foreldrene , vil det også gå gjennom. Det vil ikke gjøre noe helt av seg selv (med mindre du er der inne), men currentColorer basert på, colorslik at du kan bruke det til andre ting.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Se Pen CodePen-logoen som Inline SVG av Chris Coyier (@chriscoyier) på CodePen.
