Inline SVG može se "oblikovati" u smislu da već ima ispune i poteze i što je drugo kad ga stavite na stranicu. To je sjajan i potpuno fin način korištenja ugrađenog SVG-a. Ali možete i stilni SVG oblikovati putem CSS-a, što je pomalo strašno jer, pretpostavljam za mnoge od nas, CSS se osjeća snažno i ugodno.
Djeluje prilično onako kako biste očekivali. Evo jednostavnog primjera:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )Moglo bi se reći da CSS ima malo više snage od atributa stila na samim SVG elementima. Da je tako fill="red"bilo, CSS bi i dalje "pobijedio". Možda mislite suprotno jer se čini da bi atributi stila bili moćni poput umetnutih stilova, ali nisu. Ugrađeni stilovi i dalje su moćni.
Isto tako, CSS pravila ne spuštaju se ako se dogodi išta konkretnije. Na primjer:
.parent ( fill: red; )CSS u ovom slučaju gubi, jer se plava boja preciznije primjenjuje na rect.
Ako planiram oblikovati SVG putem CSS-a, općenito mi je najlakše u potpunosti ostaviti atribute stila izvan SVG elemenata.
Važno je znati oprez!
Proveli smo vrijeme razgovarajući o tome . Recimo da je ovo situacija:
Na kraju se to "dijete" stavi u tog "roditelja", zar ne? Pravo. Dakle, ovo bi trebalo uspjeti?
.parent .child ( fill: red; )Ali nije.
Na taj način kloniranje to klonira i stavlja u "Shadow DOM" u tom drugom SVG-u. Ne možete prodrijeti kroz taj DOM u sjeni s takvim selektorom. Jednostavno ne ide. Možda će jednog dana biti rješenja, ali trenutno ga nema.
Možete učiniti poput:
.parent ( fill: red; )A taj će ispun ispuniti kaskadno i utjecati na podređene elemente ako na tom putu nema ništa konkretnije. Ili
.child ( fill: red; )i utječu na sve slučajeve tog djeteta. Ali samo ne oboje.
Ako vam trebaju različito stilizirane verzije iste stvari ...
Samo duplicirajte ili sve što vam treba. Velika većina podataka bit će identična, a GZip jede identičan tekst za doručak.