Mēs uzzinājām, ka izmantošanas ierobežojums, lai ievietotu nedaudz SVG, ir tāds, ka jūs nevarat rakstīt saliktus CSS selektorus, kas ietekmē tos. Piemēram:
Šī ēnas DOM robeža neļauj atlasītājiem, piemēram,
/* nope */ .parent .child ( )no darba. Varbūt kādreiz mēs saņemsim strādājošu CSS selektoru, kas iekļūs šajā ēnu DOM robežā, taču šī raksta laikā tas vēl nav šeit.
Jūs joprojām varat iestatīt aizpildījumu vecākam, un tas tiks samazināts, taču tas jums tikai vienu krāsu (atcerieties, ka fillšīm formām nav jāiestata prezentācijas atribūts!).
Fabrice Weinberg domāja par veiklu tehniku, lai iegūtu divas krāsas, tomēr currentColorCSS izmantojot atslēgvārdu.
Iestatiet aizpildīšanas CSS rekvizītu visām formām, kas jums patīk ar pašreizējo
.shape-1, .shape-2 ( fill: currentColor; )Tādā veidā, kad vecākam iestatīsit krāsu rekvizītu , tas arī tiks izlaists. Tas pats neko nedarīs (ja vien jums tur nav iekšā), bet tas currentColorir balstīts uz to, colorlai jūs to varētu izmantot citām lietām.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demonstrācija:
Skatiet Pen CodePen logotipu kā Inline SVG, Chris Coyier (@chriscoyier) vietnē CodePen.