Saime teada, et natuke SVG sisestamise kasutamist piirab see, et te ei saa kirjutada liit CSS-i selektoreid, mis seal läbi mõjutavad. Näiteks:
See varjutatud DOM-i piir takistab selektorite meeldimist
/* nope */ .parent .child ( )töötamisest. Võib-olla saame kunagi töötava CSS-i valija tungida sellest varju DOM-i piirist, kuid selle kirjutamise seisuga pole see veel siin.
Saate ikkagi määrata vanema täitmise ja see langeb läbi, kuid see annab teile ainult ühe värvi (pidage meeles, et ärge määrake fillneile kujunditele esitlusatribuuti !).
Fabrice Weinberg mõtles välja korraliku väikese tehnika kahe värvi saamiseks, kasutades currentColorCSS-is märksõna ära .
Määrake CSS-i atribuut mis tahes kujundite jaoks praeguseksColor:
.shape-1, .shape-2 ( fill: currentColor; )Nii, kui määrate vanemale värviomaduse , siis ka see astub läbi. See ei tee iseenesest midagi (kui teil pole seal midagi), kuid currentColorsee põhineb colorsellel , et saaksite seda kasutada muudeks asjadeks.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Vaadake Chris Coyieri (@chriscoyier) poolt CodePenil Pen CodePen'i logo SVNAna.