20: Styling Inline SVG - Puteri și limitări - CSS-Tricks

Inline SVG poate fi „stilizat” în sensul că are deja umpluturi și linii și nu este în secunda pe care ați pus-o pe pagină. Este minunat și un mod total bun de a utiliza SVG inline. Dar puteți, de asemenea, stiliza SVG inline prin CSS, ceea ce este un pic minunat, deoarece, îmi imaginez pentru mulți dintre noi, CSS este locul în care ne simțim puternici și confortabili.

Funcționează destul de mult cum v-ați aștepta. Iată un exemplu simplu:

.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )

CSS are un pic „mai multă putere”, ați putea spune, decât atributele de stil ale elementelor SVG în sine. Dacă asta ar avea ca fill="red"pe el, CSS ar „câștiga” în continuare. S-ar putea să credeți contrariul, deoarece se pare că atributele de stil ar fi puternice ca și stilurile în linie, dar nu sunt. Stilurile în linie sunt încă puternice.

La fel, regulile CSS nu cad în jos dacă se întâmplă ceva mai specific. De exemplu:

.parent ( fill: red; )

CSS pierde în acest caz, deoarece albastrul este aplicat mai specific la rect.

Dacă intenționez să stilizez SVG prin CSS, în general mi se pare cel mai ușor să las doar atributele de stil în afara elementelor SVG.

Lucru important de știut alertă!

Am petrecut timp vorbind despre . Spuneți că aceasta este situația:

În cele din urmă, acel „copil” este pus în acel „părinte”, nu? Dreapta. Deci ar trebui să funcționeze?

.parent .child ( fill: red; )

Dar nu.

Că modul în care funcționează, îl clonează și îl pune într-un „Shadow DOM” în al doilea SVG. Nu puteți pătrunde prin acea umbră DOM cu un selector de genul. Pur și simplu nu funcționează. Poate că într-o zi va exista o soluție, dar nu există chiar acum.

Puteți face ca: