Saznali smo da je ograničenje upotrebe za umetanje malo SVG-a to što ne možete pisati složene CSS selektore koji utječu na njih. Na primjer:
Ta DOM granica sjene sprečava selektore poput
/* nope */ .parent .child ( )od rada. Možda ćemo jednog dana dobiti radni CSS selektor koji će prodrijeti kroz onu DOM granicu sjene, ali od ovog pisanja to još nije ovdje.
I dalje možete postaviti ispunu na roditelja i ona će se kaskadno spustiti, ali to vam daje samo jednu boju (ne zaboravite da fillna te oblike ne postavite prezentacijski atribut!).
Fabrice Weinberg smislio je urednu malu tehniku kako bi dobio dvije boje, iskorištavajući currentColorključnu riječ u CSS-u.
Postavite svojstvo CSS fill na bilo koji oblik koji želite na currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Na taj način kada postavite svojstvo boje na roditelja , to će se također slagati. Neće učiniti ništa samo po sebi (osim ako nemate tamo), već currentColorse temelji na njemu colortako da ga možete koristiti za druge stvari.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Pogledajte logotip Pen CodePen kao Inline SVG Chrisa Coyiera (@chriscoyier) na CodePenu.