Inline SVG je možné „štylizovať“ v tom zmysle, že už má výplne a ťahy a čo už druhý vložíte na stránku. Je to úžasné a úplne vynikajúce riešenie na použitie vloženého SVG. Môžete však tiež navrhnúť štýl vloženého SVG pomocou CSS, čo je úžasné, pretože pre mnohých z nás je to CSS, kde sa cítime výkonní a pohodlní.
Funguje to do veľkej miery tak, ako by ste čakali. Tu je jednoduchý príklad:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS má, dá sa povedať, trochu „viac sily“ ako atribúty štýlu na samotných prvkoch SVG. Keby sa to páčilo fill="red", CSS by stále „vyhralo“. Možno si myslíte opak, pretože sa zdá, že atribúty štýlov by boli silné ako vložené štýly, ale nie sú. Vložené štýly sú stále výkonné.
Rovnako sa pravidlá CSS nekaskádujú, ak sa deje niečo konkrétnejšie. Napríklad:
.parent ( fill: red; )CSS v tomto prípade prehráva, pretože modrá sa konkrétnejšie nanáša na konečnú.
Ak plánujem upravovať štýl SVG pomocou CSS, je pre mňa najjednoduchšie nechať atribúty štýlu úplne mimo prvkov SVG.
Dôležité je vedieť upozornenie!
Strávili sme čas rozhovormi . Povedzme, že je to situácia:
Nakoniec sa „dieťa“ dostane do toho „rodiča“, že? Správny. Toto by teda malo fungovať?
.parent .child ( fill: red; )Ale nie je.
Takto to funguje, klonuje to a vloží to do „tieňového DOM“ v tom druhom SVG. Nemôžete preniknúť cez tento tieňový DOM takým selektorom. Proste nefunguje. Možno niekedy bude riešenie, ale teraz nie je.
Môžete robiť nasledovné:
.parent ( fill: red; )A táto výplň bude kaskádovo prechádzať a ovplyvňovať podradené prvky, ak v ceste nie je nič konkrétnejšie. Alebo
.child ( fill: red; )a ovplyvňujú všetky prípady tohto dieťaťa. Ale len nie oboje.
Ak potrebujete rozdielne štylizované verzie tej istej veci ...
Stačí duplikovať alebo čokoľvek, čo potrebujete. Drvivá väčšina informácií bude identická a GZip bude na raňajky jesť rovnaký text.