Inline SVG voidaan “muotoilla” siinä mielessä, että sillä on jo täytteitä ja viivoja ja mitä tahansa, kun laitat sen sivulle. Se on mahtavaa ja aivan hieno tapa käyttää inline SVG: tä. Mutta voit myös tyylittää SVG: n inline CSS: n kautta, mikä on tavallaan mahtavaa, koska luulen, että monille meistä CSS tuntuu voimakkaalta ja mukavalta.
Se toimii melko paljon, kuten voit odottaa. Tässä on yksinkertainen esimerkki:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS: llä on hieman "enemmän voimaa", voisi sanoa, kuin tyylimääritteet itse SVG-elementeissä. Jos sillä olisi ollut fill="red"niin, CSS silti "voittaisi". Saatat ajatella päinvastoin, koska näyttää siltä, että tyylimääritteet olisivat tehokkaita kuin sisäiset tyylit, mutta ne eivät ole. Inline-tyylit ovat kuitenkin edelleen tehokkaita.
Samoin CSS-säännöt eivät laskeudu alas, jos jotain tapahtuu tarkemmin. Esimerkiksi:
.parent ( fill: red; )CSS häviää tässä tapauksessa, koska sinistä käytetään tarkemmin suoraan.
Jos aion tyylittää SVG: n CSS: n kautta, mielestäni on helpointa jättää tyylimääritteet kokonaan SVG-elementtien ulkopuolelle.
Tärkeää tietää hälytys!
Olemme käyttäneet aikaa puhumiseen . Sano, että tämä on tilanne:
Viime kädessä tuo "lapsi" laitetaan "vanhempaan"? Aivan. Joten tämän pitäisi toimia?
.parent .child ( fill: red; )Mutta ei.
Näin tapa toimii, se kloonaa sen ja laittaa sen “Shadow DOM: iin” toisessa SVG: ssä. Et voi tunkeutua tuon varjon DOM: n läpi tällaisella valitsimella. Ei vain toimi. Ehkä jonain päivänä on ratkaisu, mutta ei ole juuri nyt.
Voit tehdä kuten:
.parent ( fill: red; )Ja tämä täyttö kasaantuu läpi ja vaikuttaa lapsielementteihin, jos sillä ei ole mitään tarkempaa. Tai
.child ( fill: red; )ja vaikuttaa kaikkiin kyseisen lapsen esiintymiin. Mutta ei molempia.
Jos tarvitset saman tyylin eri tyylisiä versioita…
Kopioi vain tai mitä tarvitset. Suurin osa tiedoista on identtisiä, ja GZip syö identtistä tekstiä aamiaiseksi.