Inline SVG může být „stylizovaný“ v tom smyslu, že již má výplně a tahy a bez ohledu na to, jaký druhý jej umístíte na stránku. To je úžasný a naprosto skvělý způsob, jak používat inline SVG. Ale můžete také stylovat inline SVG pomocí CSS, což je docela úžasné, protože si myslím, že pro mnoho z nás je CSS místem, kde se cítíme mocní a pohodlní.
Funguje to do značné míry tak, jak byste čekali. Zde je jednoduchý příklad:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS má, dalo by se říct, trochu „více síly“ než atributy stylu na samotných prvcích SVG. Pokud by se to líbilo fill="red", CSS by stále „zvítězilo“. Možná si myslíte opak, protože se zdá, že atributy stylu by byly silné jako vložené styly, ale nejsou. Vložené styly jsou stále silné.
Stejně tak pravidla CSS nekaskádují, pokud se děje něco konkrétnějšího. Například:
.parent ( fill: red; )CSS v tomto případě prohraje, protože modrá se konkrétněji aplikuje na konečník.
Pokud plánuji stylovat SVG pomocí CSS, obecně považuji za nejjednodušší nechat atributy stylu mimo prvky SVG úplně.
Důležité vědět upozornění!
Strávili jsme čas mluvením . Řekněme, že je to situace:
Nakonec se „dítě“ dostane do toho „rodiče“, že? Že jo. Tak tohle by mělo fungovat?
.parent .child ( fill: red; )Ale není.
Aby to fungovalo, klonuje to a vloží to do „Shadow DOM“ v tom druhém SVG. Takovým selektorem nemůžete proniknout skrz tento stínový DOM. Prostě nefunguje. Možná jednoho dne bude řešení, ale právě teď není.
Můžete dělat jako:
.parent ( fill: red; )A tato výplň bude kaskádovitě procházet a ovlivňovat podřízené prvky, pokud v cestě nebude nic konkrétnějšího. Nebo
.child ( fill: red; )a ovlivnit všechny instance tohoto dítěte. Ale prostě ne obojí.
Pokud potřebujete odlišně stylizované verze stejné věci ...
Stačí duplikovat nebo cokoli, co potřebujete. Drtivá většina informací bude identická a GZip sní o snídani stejný text.