O elemento <use> no SVG não suporta o atributo class , consulte o link
O agrupamento simples resolve esse problema:
<g id="wheel_front" class="spin">
<use xlink:href="#wheelBase" />
</g>
Eu tenho um SVG adicionado inline ao meu HTML da seguinte forma:
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256">
<defs>
<g id="my_element">
<polygon points="10 4829 45 294"/>
<polygon points="30 390 93 20"/>
</g>
</defs>
</svg>
...
Mais tarde no meu html, refiro o elemento svg assim:
<svg viewBox="0 0 256 256" class="style1"><use xlink:href="#my_element"></use></svg>
Isso funciona perfeitamente. Se eu tiver vários grupos em meu svg, posso inseri-los no HTML simplesmente referenciando seu ID de grupo ( #my_element ).
Além disso, posso fazer alterações de CSS em cada SVG, assim:
svg.style1 {
fill: red;
}
No entanto, é aí que está o meu problema. Não consigo fazer alterações no atributo CSS para os componentes individuais do SVG. Isso não funciona:
svg.style1 polygon {
stroke: purple;
fill: yellow;
}
Obviamente, posso fazer essas alterações diretamente no SVG, mas preciso inserir vários SVGs do mesmo #my_element e controlar as cores em um nível individual. Se eu fizesse as alterações no próprio SVG, todos os elementos teriam as mesmas cores, independentemente do estilo que eu aplicasse ao SVG. Então eu preciso ser capaz de fazer coisas assim:
svg.style1 polygon {
stroke: purple;
fill: yellow;
}
svg.style2 polygon {
stroke: red;
fill: white;
}
Isso pode ser feito? É possível controlar os atributos CSS de componentes SVG individuais ao usar a sintaxe use xlink:href ?
O elemento <use> no SVG não suporta o atributo class , consulte o link
O agrupamento simples resolve esse problema:
<g id="wheel_front" class="spin">
<use xlink:href="#wheelBase" />
</g>