Sužinojome, kad norint įterpti šiek tiek SVG apribojimas yra tas, kad negalima rašyti sudėtinių CSS selektorių, kurie ten veikia. Pavyzdžiui:
Ta šešėlinė DOM riba neleidžia atrankoms patikti
/* nope */ .parent .child ( )nuo darbo. Galbūt kada nors gausime veikiantį CSS parinkiklį, kuris prasiskverbs per tą šešėlinę DOM ribą, tačiau šio rašymo metu jo dar nėra.
Jūs vis tiek galite nustatyti tėvų užpildymą, kuris praeis žemyn, tačiau tai suteiks jums tik vieną spalvą (nepamirškite nenustatyti fillšių figūrų pristatymo atributo!).
Vis dėlto Fabrice'as Weinbergas sumanė parengti nedidelę techniką, kad gautų dvi spalvas, naudodamas currentColorCSS raktinį žodį.
Visų norimų formų CSC ypatybę nustatykite į „currentColor“:
.shape-1, .shape-2 ( fill: currentColor; )Tokiu būdu, kai tėvams nustatysite spalvų ypatybę , tai taip pat bus perkelta. Tai nieko nepadarys savaime (nebent turite ten), bet currentColoryra pagrįsta ne colortodėl , kad galėtumėte naudoti kitiems dalykams.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demonstracija:
Žiūrėkite „Pen CodePen“ logotipą kaip „Inline SVG“, kurį sukūrė Chrisas Coyieris (@chriscoyier) „CodePen“.