SVG USE elemento y: estilo de desplazamiento
Estoy tratando de usar CSS:hover pseudoclase para diseñar elementos SVG incrustados desde<defs> por<use> etiqueta, pero no parece funcionar: - / Aquí está mi 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>
Quiero que funcione de manera que cuando el usuario coloca el puntero del mouse sobre el elemento incrustado, su elemento interno con la clase "activa" cambiará su estilo. Funciona cuando inserto una forma de la<defs> directamente y aplicar la clase CSS a la<use> que lo incrusta. Pero no funciona para ninguna clase o ID dentro del grupo incorporado a través de<use>.
¿Como arreglarlo?
O tal vez hay una mejor manera de hacerlo?
Necesito cambiar solo esta parte en particular dentro del objeto incrustado cuando el usuario lo coloca, no todo el grupo. Se debe a que diferentes partes de este grupo tendrían diferentes estilos aplicados, y necesitan cambiar de manera diferente cuando se desplaza con el mouse.
Edit: Lo que quiero conseguir
Lo que quiero obtener es una forma de incrustar un "objeto de biblioteca" desde<defs> en muchos lugares diferentes en mi documento SVG. Algunas partes de este objeto deben diseñarse con colores personalizados desde el CSS, porque necesito una fácil personalización de esos colores sin cambiar el código del objeto de la biblioteca.
Y luego debo indicarle al usuario cuando el puntero del mouse está sobre el objeto "activo", aplicando un estilo diferente a sus partes: algunos contornos brillantes aquí y allá para mostrar la forma de las áreas en las que se puede hacer clic cuando el puntero del mouse está sobre ellas.
Desafortunadamente, no puedo aplicar el estilo a la<use> subelementos de elementos, porque no son subelementos de<use> en el DOM (como otros ya mencionados). Puedo aplicar algunos estilos a los elementos dentro del<defs> sección, porque están en el DOM y son direccionables con selectores de CSS, perono poder estar suspendido, porque son invisibles, por lo que se aplican:hover Pseudoclase para ellos no funciona. Y tampoco funciona si esta clase se aplica a la<use>, porque entonces no puedo sub-seleccionar los subelementos apropiados (no son subelementos de<use>). Así que no tengo ningún gancho para aplicar esos:hover seudoclase a.
Tal vez hay alguna otra solución a mi problema?