Az Inline SVG „stílusú” lehet abban az értelemben, hogy már vannak kitöltései és vonásai, és mi az a másodperc, amikor betette az oldalra. Ez fantasztikus és teljesen jó módszer az inline SVG használatára. De a CSS-en keresztül is formázhat inline SVG-t, ami nagyon fantasztikus, mert sokak számára elképzelem, hogy a CSS-ben érezzük magunkat erőteljesnek és kényelmesnek.
Nagyjából úgy működik, ahogy elvárhatja. Íme egy egyszerű példa:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )A CSS valamivel „nagyobb erővel” rendelkezik, mondhatni, mint a stílusattribútumok magukon az SVG elemeken. Ha ez tetszett fill="red"volna neki, a CSS akkor is „nyer”. Gondolhat az ellenkezőjére, mert úgy tűnik, hogy a stílusattribútumok erőteljesek lennének, mint az inline stílusok, de nem azok. Soros stílusok vannak még mindig erős mégis.
Hasonlóképpen, a CSS-szabályok sem lépnek le, ha valami konkrétabb történik. Például:
.parent ( fill: red; )A CSS ebben az esetben veszít, mert a kéket pontosabban alkalmazzák a jobb oldalon.
Ha azt tervezem, hogy az SVG-t CSS-en keresztül stílusosítom, akkor általában a legkönnyebbnek tartom, ha a stílusattribútumokat teljesen kihagyom az SVG elemekről.
Fontos tudnivaló figyelmeztetés!
Időt töltöttünk beszélgetéssel . Mondja, hogy ez a helyzet:
Végül azt a „gyereket” helyezik abba a „szülőbe”, igaz? Jobb. Tehát ennek működnie kell?
.parent .child ( fill: red; )De nem.
Így működik, ezt klónozza és „Shadow DOM” -ba helyezi abban a második SVG-ben. Ilyen választóval nem lehet behatolni az árnyék DOM-ba. Csak nem működik. Talán egyszer lesz megoldás, de most nincs.
A következőket teheti:
.parent ( fill: red; )És ez a kitöltés át fog hatolni a gyermekelemekre, és hatással lesz rá, ha nincs semmi konkrétabb. Vagy
.child ( fill: red; )és érinti a gyermek minden esetét. De csak nem mindkettő.
Ha ugyanarra a dologra más stílusú változatokra van szüksége ...
Csak másolja a vagy bármit, amire szüksége van. Az információk túlnyomó többsége azonos lesz, és a GZip egyforma szöveget eszik reggelire.