Vi lärde oss att en begränsning av att använda för att infoga lite SVG är att du inte kan skriva sammansatta CSS-väljare som påverkar därigenom. Till exempel:
Skuggans DOM-gräns förhindrar väljare som
/* nope */ .parent .child ( )från att arbeta. Kanske en dag får vi en fungerande CSS-väljare för att tränga in i den skugg-DOM-gränsen, men när detta skrivs är den inte här ännu.
Du kan fortfarande ställa in fyllningen på föräldern och det kommer att kaskas ner, men det ger dig bara en färg (kom ihåg att inte ställa presentationsattributet fillpå dessa former!).
Fabrice Weinberg tänkte på en snygg liten teknik för att få två färger men utnyttjade currentColornyckelordet i CSS.
Ställ in fill CSS-egenskapen på alla former du vill ha till currentColor:
.shape-1, .shape-2 ( fill: currentColor; )På det sättet när du ställer in färgegenskapen på föräldern , kommer det också att kaskas igenom. Det kommer inte att göra någonting helt av sig själv (såvida du inte har det där), men currentColorär baserat på colorså att du kan använda det för andra saker.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Se Pen CodePen-logotypen som Inline SVG av Chris Coyier (@chriscoyier) på CodePen.