Inline SVG kan "utformas" i den meningen att det redan har fyllningar och streck och vad som helst den andra du lägger den på sidan. Det är fantastiskt och ett helt bra sätt att använda inbyggd SVG. Men du kan också utforma inbyggd SVG genom CSS, vilket är ganska fantastiskt, för jag tror för många av oss att CSS är där vi känner oss kraftfulla och bekväma.
Det fungerar ganska mycket hur du kan förvänta dig. Här är ett enkelt exempel:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS har lite "mer kraft", kan du säga, än stilattribut på själva SVG-elementen. Om det hade liknande fill="red", skulle CSS fortfarande "vinna". Du kanske tror det motsatta eftersom det verkar som om stilattribut skulle vara kraftfulla som inline-stilar, men det är de inte. Inbyggda stilar är dock fortfarande kraftfulla.
På samma sätt faller CSS-reglerna inte ner om det händer något mer specifikt. Till exempel:
.parent ( fill: red; )CSS förlorar i det här fallet, eftersom den blåa tillämpas mer specifikt på rektorn.
Om jag planerar att utforma SVG genom CSS, tycker jag i allmänhet att det är lättast att bara lämna stilattribut helt från SVG-elementen.
Viktigt att veta varning!
Vi har spenderat tid på att prata om . Säg att detta är situationen:
I slutändan blir det "barnet" satt i den "föräldern", eller hur? Rätt. Så detta borde fungera?
.parent .child ( fill: red; )Men det gör det inte.
Att sättet fungerar klonar det och sätter det i en "Shadow DOM" i den andra SVG. Du kan inte tränga igenom DOM-skuggan med en sådan väljare. Fungerar bara inte. Kanske en dag kommer det att finnas en lösning, men det finns det inte just nu.
Du kan göra som:
.parent ( fill: red; )Och den fyllningen kommer att kaskadera igenom och påverka barnelementen om det inte finns något mer specifikt i vägen. Eller
.child ( fill: red; )och påverkar alla fall av det barnet. Men bara inte båda.
Om du behöver olika versioner av samma sak ...
Duplicera bara eller vad du behöver. Den stora majoriteten av informationen kommer att vara identisk och GZip äter identisk text till frukost.