O SVG embutido pode ser “estilizado” no sentido de que já tem preenchimentos e traços e outros enfeites no segundo que você o coloca na página. Isso é incrível e uma maneira totalmente boa de usar o SVG embutido. Mas você também pode estilizar SVG inline por meio de CSS, o que é incrível porque, imagino que para muitos de nós, CSS é onde nos sentimos poderosos e confortáveis.
Funciona muito bem como você esperaria. Aqui está um exemplo simples:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )O CSS tem um pouco “mais poder”, você poderia dizer, do que os atributos de estilo nos próprios elementos SVG. Se tivesse gostado fill="red", o CSS ainda “venceria”. Você pode pensar o contrário, porque parece que os atributos de estilo seriam poderosos como os estilos embutidos, mas não são. Os estilos embutidos ainda são poderosos.
Da mesma forma, as regras CSS não se propagam se houver algo mais específico acontecendo. Por exemplo:
.parent ( fill: red; )O CSS perde neste caso, pois o azul está sendo aplicado mais especificamente no retângulo.
Se estou planejando estilizar SVG por meio de CSS, geralmente acho mais fácil simplesmente deixar os atributos de estilo fora dos elementos SVG.
Importante saber alerta!
Passamos um tempo falando sobre . Diga que esta é a situação:
Em última análise, esse “filho” é colocado naquele “pai”, certo? Direita. Então isso deve funcionar?
.parent .child ( fill: red; )Mas não é assim.
Assim funciona, ele clona isso e o coloca em um “Shadow DOM” naquele segundo SVG. Você não pode penetrar por aquele DOM de sombra com um seletor como esse. Simplesmente não funciona. Talvez algum dia haja uma solução, mas não há agora.
Você pode fazer como:
.parent ( fill: red; )E esse preenchimento irá se espalhar e afetar os elementos filho se não houver nada mais específico no caminho. Ou
.child ( fill: red; )e afetam todas as instâncias dessa criança. Mas não ambos.
Se você precisa de versões com estilos diferentes da mesma coisa ...
Apenas duplique o ou o que você precisar. A grande maioria das informações será idêntica e o GZip comerá texto idêntico no café da manhã.