Inline SVG kan worden "gestileerd" in de zin dat het al vullingen en streken heeft en zo ook op het moment dat u het op de pagina plaatst. Dat is geweldig en een prima manier om inline SVG te gebruiken. Maar je kunt ook inline SVG stylen via CSS, wat best geweldig is, want ik kan me voorstellen dat voor velen van ons CSS is waar we ons krachtig en comfortabel voelen.
Het werkt ongeveer zoals je zou verwachten. Hier is een eenvoudig voorbeeld:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS heeft een beetje "meer kracht", zou je kunnen zeggen, dan stijlattributen op de SVG-elementen zelf. Als dat er fill="red"op stond, zou de CSS nog steeds "winnen". Je zou het tegenovergestelde kunnen denken, omdat het lijkt alsof stijlattributen zo krachtig zijn als inline stijlen, maar dat zijn ze niet. Inline-stijlen zijn echter nog steeds krachtig.
Evenzo lopen CSS-regels niet naar beneden als er iets specifiekers gebeurt. Bijvoorbeeld:
.parent ( fill: red; )De CSS verliest in dit geval, omdat het blauw meer specifiek op de rect wordt toegepast.
Als ik van plan ben om SVG op te maken via CSS, vind ik het over het algemeen het gemakkelijkst om stijlkenmerken gewoon helemaal uit de SVG-elementen te laten.
Belangrijk om te weten alert!
We hebben er tijd over gehad . Stel dat dit de situatie is:
Uiteindelijk wordt dat "kind" in die "ouder" geplaatst, toch? Rechtsaf. Dus dit zou moeten werken?
.parent .child ( fill: red; )Maar dat is niet zo.
Dat de manier werkt, het kloont dat en plaatst het in een "Shadow DOM" in die tweede SVG. Met zo'n selector kun je niet door die schaduw-DOM heen dringen. Het werkt gewoon niet. Misschien komt er ooit een oplossing, maar die is er nu niet.
U kunt doen als:
.parent ( fill: red; )En die vulling zal doorlopen en de onderliggende elementen beïnvloeden als er niets specifieks in de weg zit. Of
.child ( fill: red; )en van invloed zijn op alle gevallen van dat kind. Maar niet allebei.
Als je anders gestileerde versies van hetzelfde nodig hebt ...
Dupliceer gewoon de of wat je maar nodig hebt. De overgrote meerderheid van de informatie zal identiek zijn en GZip eet identieke tekst als ontbijt.