Inline SVG-d saab “stiilis” kujundada selles mõttes, et sellel on juba täidised ja jooned ning mis siis, kui te selle lehele panete. See on vinge ja täiesti hea viis SVG-i kasutamiseks. Kuid saate ka sisseehitatud SVG-d kujundada CSS-i kaudu, mis on üsna vinge, sest kujutan ette, et paljude jaoks tunneme CSS-i end võimsana ja mugavalt.
See töötab üsna palju, nagu võite oodata. Siin on lihtne näide:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS-il on natuke rohkem jõudu, võiks öelda, kui stiiliatribuutidel SVG elementidel endil. Kui see oleks meeldinud fill="red", võidaks CSS ikkagi. Võiksite mõelda vastupidiselt, sest tundub, et stiiliatribuudid oleksid võimsad nagu tekstisisesed stiilid, kuid need pole nii. Inline stiilid on endiselt võimsad.
Samuti ei kaota CSS-i reeglid alla, kui üldse midagi täpsemat toimub. Näiteks:
.parent ( fill: red; )CSS kaotab sel juhul, sest sinist rakendatakse täpsemalt sirgele.
Kui kavatsen SVG-d stiilida CSS-i kaudu, on minu arvates kõige lihtsam jätta stiiliatribuudid lihtsalt SVG-elementidest välja.
Tähtis teadmine, mida teate!
Oleme veetnud aega rääkimiseks . Oletame, et see on olukord:
Lõppkokkuvõttes pannakse see "laps" sellesse "vanemasse", eks? Õige. Nii et see peaks töötama?
.parent .child ( fill: red; )Kuid see pole nii.
Nii see toimib, kloonib selle ja paneb selle teises SVG-s varju DOM-i. Sellise valijaga ei saa tungida läbi selle varju DOMi. Lihtsalt ei tööta. Võib-olla kunagi on lahendus olemas, kuid praegu pole.
Võite teha järgmist:
.parent ( fill: red; )Ja see täitmine langeb läbi lapse elementide ja mõjutab neid, kui sellel teel pole midagi täpsemat. Või
.child ( fill: red; )ja mõjutavad selle lapse kõiki juhtumeid. Kuid lihtsalt mitte mõlemad.
Kui vajate sama asja erinevas stiilis versioone ...
Lihtsalt kopeerige või mida iganes vajate. Valdav osa teabest on identne ja GZip sööb hommikusöögiks ühesugust teksti.