Inline SVG kan "styles" i den forstand, at det allerede har udfyldninger og streger, og hvad ikke det andet du lægger det på siden. Det er fantastisk og en helt fin måde at bruge inline SVG på. Men du kan også style inline SVG gennem CSS, hvilket er lidt fantastisk, fordi jeg forestiller mig for mange af os, at CSS er, hvor vi føler os stærke og komfortable.
Det fungerer stort set, hvordan du ville forvente. Her er et simpelt eksempel:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS har lidt "mere magt", kan du sige end stilattributter på selve SVG-elementerne. Hvis det havde lyst fill="red"til det, ville CSS stadig "vinde". Du tror måske det modsatte, fordi det ser ud til, at stilattributter ville være stærke som indbyggede stilarter, men de er det ikke. Inline-stilarter er dog stadig stærke.
Ligeledes kaskades CSS-regler ikke ned, hvis der overhovedet sker noget mere specifikt. For eksempel:
.parent ( fill: red; )CSS taber i dette tilfælde, fordi det blå anvendes mere specifikt til det rette.
Hvis jeg planlægger at style SVG gennem CSS, finder jeg det generelt nemmest at bare lade stilattributter være udelukket af SVG-elementerne.
Vigtig ting at vide alarm!
Vi har brugt tid på at tale om . Sig dette er situationen:
I sidste ende bliver det "barn" sat i den "forælder", ikke? Ret. Så dette skal fungere?
.parent .child ( fill: red; )Men det gør det ikke.
At den måde fungerer, kloner det og sætter det i en "Shadow DOM" i det andet SVG. Du kan ikke trænge igennem den skygge DOM med en sådan vælger. Det virker bare ikke. Måske en dag vil der være en løsning, men der er ikke lige nu.
Du kan gøre som:
.parent ( fill: red; )Og den fyldning vil kaskade igennem og påvirke barnelementerne, hvis der ikke er noget mere specifikt i vejen. Eller
.child ( fill: red; )og påvirker alle forekomster af det barn. Men bare ikke begge dele.
Hvis du har brug for forskellige versioner af den samme ting ...
Du skal bare duplikere det eller hvad du har brug for. Langt størstedelen af informationen vil være identisk, og GZip spiser identisk tekst til morgenmad.