„Inline SVG“ gali būti „stiliaus“ ta prasme, kad jis jau turi užpildų ir brūkšnių, ir kas antrą kartą įdėsite jį į puslapį. Tai nuostabus ir visiškai puikus būdas naudoti tiesioginį SVG. Bet jūs taip pat galite stilizuoti SVG per CSS, o tai yra nuostabu, nes, daugeliui mūsų, aš įsivaizduoju, kad CSS mes jaučiamės galingi ir patogūs.
Tai veikia beveik taip, kaip galėtumėte tikėtis. Štai paprastas pavyzdys:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS turi šiek tiek „daugiau galios“, galima sakyti, nei stiliaus atributai pačiuose SVG elementuose. Jei tai būtų patiko fill="red", CSS vis tiek „laimėtų“. Galima galvoti priešingai, nes atrodo, kad stiliaus atributai būtų galingi, kaip ir įterptieji stiliai, tačiau jie nėra tokie. Įterpti stiliai vis dar yra galingi.
Panašiai CSS taisyklės nesumažėja, jei kas nors iš tikrųjų vyksta. Pavyzdžiui:
.parent ( fill: red; )CSS šiuo atveju pralaimi, nes mėlyna spalva yra taikoma tiesiau tiesiai.
Jei planuoju stilizuoti SVG per CSS, man atrodo, kad paprasčiausia tiesiog palikti stiliaus atributus iš SVG elementų.
Svarbus dalykas, kurį reikia žinoti!
Mes praleidome laiką kalbėdami . Tarkime, kad tokia situacija:
Galų gale tas „vaikas“ patenka į tą „tėvą“, tiesa? Teisingai. Taigi tai turėtų veikti?
.parent .child ( fill: red; )Bet taip nėra.
Tokiu būdu jis klonuojamas ir įtraukiamas į „Shadow DOM“ tame antrame SVG. Negalite prasiskverbti pro tą šešėlinį DOM su tokiu parinkikliu. Tiesiog neveikia. Galbūt kada nors bus sprendimas, bet ne dabar.
Tai galite padaryti taip:
.parent ( fill: red; )Ir tai užpildys kaskadą ir paveiks vaiko elementus, jei nebus nieko konkretesnio. Arba
.child ( fill: red; )ir paveikti visus to vaiko atvejus. Bet tik ne abu.
Jei jums reikia skirtingų stilių to paties dalyko versijų ...
Tiesiog kopijuokite ar bet ką, ko jums reikia. Didžioji dauguma informacijos bus identiška, o „GZip“ pusryčiams valgo identišką tekstą.