Inline SVG kan "styles" i den forstand at det allerede har fyll og slag og hva ikke det andre du legger det på siden. Det er kjempebra og en helt fin måte å bruke innebygd SVG på. Men du kan også style innebygd SVG gjennom CSS, noe som er ganske fantastisk, for jeg forestiller meg for mange av oss at CSS er der vi føler oss kraftige og komfortable.
Det fungerer ganske mye hvordan du forventer. Her er et enkelt eksempel:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS har litt “mer kraft”, kan du si, enn stilattributter på selve SVG-elementene. Hvis det hadde noe fill="red"med det, ville CSS fortsatt "vinne". Du tror kanskje det motsatte fordi det virker som stilattributter ville være kraftige som innebygde stiler, men de er det ikke. Inline-stiler er fremdeles kraftige.
Likeledes faller ikke CSS-regler ned hvis det skjer noe mer spesifikt. For eksempel:
.parent ( fill: red; )CSS taper i dette tilfellet, fordi det blå blir brukt mer spesifikt på det rette.
Hvis jeg planlegger å style SVG gjennom CSS, synes jeg generelt det er enklest å bare la stilattributter være helt utenfor SVG-elementene.
Viktig ting å vite varsel!
Vi har brukt tid på å snakke om . Si dette er situasjonen:
Til slutt blir det "barnet" satt i den "foreldren", ikke sant? Ikke sant. Så dette skal fungere?
.parent .child ( fill: red; )Men det gjør det ikke.
At måten fungerer, kloner det og setter det inn i en "Shadow DOM" i den andre SVG. Du kan ikke trenge gjennom den skyggen DOM med en slik velger. Fungerer bare ikke. Kanskje en dag vil det være en løsning, men det er det ikke akkurat nå.
Du kan gjøre som:
.parent ( fill: red; )Og den fyllingen vil gå gjennom og påvirke barneelementene hvis det ikke er noe mer spesifikt i veien. Eller
.child ( fill: red; )og påvirker alle tilfeller av det barnet. Men bare ikke begge deler.
Hvis du trenger forskjellige utforminger av det samme ...
Bare dupliser eller hva du trenger. De aller fleste opplysningene vil være identiske, og GZip spiser identisk tekst til frokost.
