Izvedeli smo, da je omejitev uporabe SVG-ja v tem, da ne morete pisati sestavljenih izbirnikov CSS, ki vplivajo nanjo. Na primer:
Ta meja DOM v senci preprečuje izbirnikom, kot so
/* nope */ .parent .child ( )od dela. Morda bomo nekega dne dobili delujoči izbirnik CSS, ki bo prodrl v to mejo DOM-a v senci, toda od trenutka pisanja tega še ni.
Še vedno lahko nastavite polnilo na nadrejenem in to se bo kaskadno znižalo, vendar boste dobili samo eno barvo (ne pozabite, da fillna teh oblikah ne nastavite predstavitvenega atributa!).
Fabrice Weinberg si je omislil čisto majhno tehniko, da bi dobil dve barvi, pri tem pa izkoristil currentColorključno besedo v CSS.
Lastnost CSS fill za poljubne oblike nastavite na currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Na ta način, ko nastavite barvno lastnost na nadrejenega , se bo tudi kaskadno prešla. Nič ne bo storil sam (razen če ga imate tam), ampak currentColortemelji na tem, colorda ga lahko uporabite za druge stvari.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Predstavitev:
Oglejte si logotip Pen CodePen kot Inline SVG Chrisa Coyierja (@chriscoyier) na CodePenu.