Vrstni SVG je mogoče "oblikovati" v smislu, da že ima zapolnitve in poteze in še kaj drugega, ko ga postavite na stran. To je čudovit in popolnoma dober način uporabe vgrajenega SVG. Lahko pa tudi vstavite SVG v vrstici prek CSS-ja, kar je neverjetno, ker se mi zdi, da se za mnoge od nas CSS počuti močno in udobno.
Deluje precej, kot bi pričakovali. Tu je preprost primer:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )Lahko bi rekli, da ima CSS nekoliko več moči kot atributi sloga na samih elementih SVG. Če bi bilo to všeč fill="red", bi CSS še vedno "zmagal". Morda bi si mislili ravno nasprotno, ker se zdi, da bi bili atributi sloga močni kot vrstni slogi, vendar niso. Vstavljeni slogi so še vedno zmogljivi.
Prav tako pravila CSS ne padajo navzdol, če se sploh zgodi kaj bolj specifičnega. Na primer:
.parent ( fill: red; )CSS v tem primeru izgubi, ker se modra natančneje nanaša na rect.
Če načrtujem oblikovanje SVG prek CSS, na splošno najlažje povsem pustim atribute sloga zunaj elementov SVG.
Pomembno je vedeti opozorilo!
Nekaj časa smo se pogovarjali o tem . Recimo, da je takšna situacija:
Končno je ta "otrok" vstavljen v tega "starša", kajne? Prav. Torej bi to moralo delovati?
.parent .child ( fill: red; )Vendar ne.
Tako deluje, to klonira in postavi v "Shadow DOM" v tej drugi SVG. Skozi ta senčni DOM ne morete prodreti s takšnim izbirnikom. Preprosto ne deluje. Mogoče bo nekoč obstajala rešitev, ki pa je trenutno ni.
To lahko storite tako:
.parent ( fill: red; )In to polnjenje se bo kaskadno prekrivalo in vplivalo na podrejene elemente, če na poti ni nič bolj specifičnega. Ali
.child ( fill: red; )in vplivajo na vse primere tega otroka. A le ne oboje.
Če potrebujete različno oblikovane različice iste stvari ...
Samo podvojite tisto, kar potrebujete. Velika večina informacij bo enaka, GZip pa za zajtrk poje enako besedilo.