Elemento SVG USE e: estilo hover
Estou tentando usar CSS:hover
pseudo-classe para estilizar elementos SVG embutidos<defs>
por<use>
tag, mas não parece funcionar: - / Aqui está o meu código:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/>
<style type="text/css" media="screen">
.active { fill: #0BE; }
.active:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; }
.active2 #p2 { fill: #0BE; }
.active2:hover #p2 { opacity: 0.8; stroke: #F0F; stroke-width: 4px; }
#p2:hover { opacity: 0.8; stroke: #F0F; stroke-width: 4px; }
</style>
</head>
<body>
<svg version="1.1" width="640" height="480"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="p0" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active"/>
<g id="gr1">
<polygon id="p1" points="130,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6"/>
<polygon id="p2" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active"/>
</g>
</defs>
<g transform="translate(70,100)">
<use xlink:href="#p0" transform="translate(40,0)"/>
<use xlink:href="#p0" transform="translate(250,0)"/>
<use xlink:href="#p0" transform="translate(460,0)" class="active" />
</g>
<g transform="translate(100,300)">
<polygon id="style" points="110,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="foo"/>
<use xlink:href="#gr1" transform="translate( 350,2)" class="active2"/>
</g>
</svg>
</body>
</html>
Eu quero que ele funcione de uma maneira que quando o usuário coloca o ponteiro do mouse sobre o elemento incorporado, seu elemento interno com a classe "ativa" mudará seu estilo. Funciona quando eu incorporo uma forma do<defs>
diretamente e aplicar a classe CSS para o<use>
que incorpora. Mas não funciona para nenhuma classe ou ID dentro do grupo incorporado através de<use>
.
Como corrigi-lo?
Ou talvez exista uma maneira melhor de fazer isso?
Eu preciso alterar apenas essa parte específica dentro do objeto incorporado quando o usuário o passa, não o grupo inteiro. É porque partes diferentes desse grupo teriam estilos diferentes aplicados, e eles precisam mudar de forma diferente quando o mouse passa.
Edit: O que eu quero conseguir
O que eu quero é uma maneira de incorporar um "objeto de biblioteca"<defs>
em muitos lugares diferentes no meu documento SVG. Algumas partes deste objeto precisam ser estilizadas com cores personalizadas do CSS, porque eu preciso de uma fácil customização dessas cores sem alterar o código do objeto da biblioteca.
E então preciso sinalizar ao usuário quando o ponteiro do mouse está acima desse objeto "ativo", estilizando suas partes de maneira diferente: alguns contornos brilhantes aqui e ali para mostrar a forma das áreas clicáveis quando o ponteiro do mouse está sobre elas.
Infelizmente, não posso aplicar o estilo ao<use>
subelementos do elemento, porque eles não são subelementos de<use>
no DOM (como outros já mencionados). Eu posso aplicar alguns estilos aos elementos dentro do<defs>
seção, porque eles estão no DOM e eles são endereçáveis com seletores CSS, mas elesnão podes ser pairado, porque eles são invisíveis, então aplicando:hover
pseudoclass para eles não funciona. E isso não funciona se esta classe é aplicada ao<use>
, porque então eu não posso sub-selecionar os sub-elementos adequados (eles não são sub-elementos de<use>
). Então eu não tenho nenhum gancho para aplicar aqueles:hover
pseudoclass para.
Talvez haja alguma outra solução para o meu problema?