Megtudtuk, hogy az SVG egy kicsit beillesztésének korlátozása az, hogy nem lehet összetett CSS-szelektorokat írni, amelyek ott keresztül hatnak. Például:
Ez az árnyék DOM határ megakadályozza a szelektort
/* nope */ .parent .child ( )a munkától. Talán egyszer kapunk egy működő CSS-választót, hogy behatoljon az árnyék DOM határába, de az írás kezdetén még nincs itt.
Még mindig beállíthatja a kitöltést a szülőn, és ez végig fog lépni, de ezzel csak egy színt kap (ne felejtse el, hogy fillezeken az alakzatokon ne állítsa be a prezentációs attribútumot!).
Fabrice Weinberg egy csinos kis technikára gondolt, hogy két színt kapjon, kihasználva a currentColorkulcsszót a CSS-ben.
Állítsa be a CSS kitöltési tulajdonságot tetszőleges alakzatokra a currentColor színre:
.shape-1, .shape-2 ( fill: currentColor; )Így, amikor a színtulajdonságot beállítja a szülőre , az is át fog lépni. Önmagában nem fog semmit sem csinálni (hacsak nincs bent), de currentColorazon alapul color, hogy más dolgokra is felhasználhatja.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demó:
Lásd a Pen CodePen logót, mint Inline SVG, Chris Coyier (@chriscoyier) a CodePen-en.