Elemento SVG USE e: estilo hover

Question

Dec 02, 2012, 09:20 PM

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?