Inline SVG può essere "stilizzato" nel senso che ha già riempimenti e tratti e quant'altro non appena lo metti sulla pagina. È fantastico e un ottimo modo per utilizzare SVG in linea. Ma puoi anche modellare SVG in linea tramite CSS, il che è piuttosto fantastico perché, immagino per molti di noi, CSS è dove ci sentiamo potenti ea nostro agio.
Funziona più o meno come ti aspetteresti. Ecco un semplice esempio:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )I CSS hanno un po '"più potere", si potrebbe dire, degli attributi di stile sugli elementi SVG stessi. Se fosse così fill="red", il CSS "vincerebbe" comunque. Potresti pensare il contrario perché sembra che gli attributi di stile sarebbero potenti come gli stili in linea, ma non lo sono. Gli stili in linea sono comunque potenti.
Allo stesso modo, le regole CSS non cadono a cascata se sta accadendo qualcosa di più specifico. Per esempio:
.parent ( fill: red; )Il CSS perde in questo caso, perché il blu viene applicato in modo più specifico al rect.
Se ho intenzione di applicare lo stile a SVG tramite CSS, generalmente trovo più semplice lasciare completamente gli attributi di stile fuori dagli elementi SVG.
Cosa importante da sapere attenzione!
Abbiamo passato del tempo a parlare di . Dì che questa è la situazione:
Alla fine quel "bambino" viene messo in quel "genitore", giusto? Giusto. Quindi questo dovrebbe funzionare?
.parent .child ( fill: red; )Ma non è così.
In questo modo funziona, lo clona e lo inserisce in uno "Shadow DOM" in quel secondo SVG. Non puoi penetrare attraverso quel DOM ombra con un selettore come quello. Semplicemente non funziona. Forse un giorno ci sarà una soluzione, ma adesso non c'è.
Puoi fare come:
.parent ( fill: red; )E quel riempimento si propagherà e influenzerà gli elementi figlio se non c'è nulla di più specifico nel modo. O
.child ( fill: red; )e influenzare tutte le istanze di quel bambino. Ma non entrambi.
Se hai bisogno di versioni con stili diversi della stessa cosa ...
Basta duplicare o qualunque cosa ti serva. La stragrande maggioranza delle informazioni sarà identica e GZip manterrà un testo identico a colazione.