Elemento SVG USE y: estilo de desplazamiento

usar CSS :hover pseudoclass para elementos SVG embebidos de la por , pero parece que no funciona: – / Aquí está mi código:

      .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; }                        

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” cambie su estilo. Funciona cuando una forma desde directamente y aplico la clase CSS al que lo incrusta. Pero no funciona para ninguna clase o ID dentro del grupo incrustado a través de .

¿Como arreglarlo?

¿O tal vez hay una mejor manera de hacerlo?

Necesito cambiar solo esta parte particular dentro del objeto incrustado cuando el usuario lo sitúa, no el grupo completo. Es porque diferentes partes de este grupo tendrían diferentes estilos aplicados, y necesitan cambiar de forma diferente cuando se mueven con el mouse.

Editar: Lo que quiero obtener

Lo que quiero obtener es una forma de insertar un “objeto de biblioteca” desde en muchos lugares diferentes en mi documento SVG. Algunas partes de este objeto deben diseñarse con colores personalizados del CSS, porque necesito una fácil personalización de esos colores sin cambiar el código del objeto de la biblioteca.

Y luego, debo señalar al usuario cuando el puntero del mouse está sobre dicho objeto “activo” al diseñar sus partes de manera diferente: algunos contornos shinys aquí y allá para mostrar la forma de las áreas clicables cuando el puntero del mouse está sobre ellos.

Desafortunadamente, no puedo aplicar el estilo a los subelementos del elemento , porque no son subelementos de en el DOM (como otros ya mencionados). Puedo aplicar algunos estilos a los elementos dentro de la sección , porque están en el DOM y son direccionables con los selectores de CSS, pero no se pueden evitar , porque son invisibles, por lo que se les aplica :hover flotación no funciona Y tampoco funciona si esta clase se aplica a , porque entonces no puedo seleccionar de nuevo los elementos secundarios adecuados (no son subelementos de ). Entonces no tengo ningún gancho para aplicar ésos :hover pseudoclass a.

Tal vez hay alguna otra solución a mi problema?

No puede abordar un elemento al que se hace referencia mediante el uso. Las especificaciones dicen:

Para los agentes de usuario que admiten Styling con CSS, la clonación profunda conceptual del elemento al que se hace referencia en un árbol DOM no expuesto también copia cualquier valor de propiedad resultante de la cascada de CSS ([CSS2], capítulo 6) en el elemento al que se hace referencia y su contenido. Los selectores CSS2 se pueden aplicar a los elementos originales (es decir, referenciados) porque son parte de la estructura formal del documento. Los selectores de CSS2 no se pueden aplicar al árbol DOM (conceptualmente) clonado porque sus contenidos no son parte de la estructura formal del documento.

Sin embargo, Firefox admite el direccionamiento de elementos “virtuales” que se incluyen a través de un wormhole de uso. Todos los demás navegadores no.

Lo que más navegador admite es cambiar el relleno o el color de currentColor si le da al elemento referenciado un valor de relleno / trazo de currentColor y luego cambia la propiedad de color del elemento al pasar el mouse. Al igual que:

            

Esto parece ser de acuerdo con la especificación:

Para los agentes de usuario que admiten Styling con CSS, la clonación profunda conceptual del elemento al que se hace referencia en un árbol DOM no expuesto también copia cualquier valor de propiedad resultante de la cascada de CSS ([CSS2], capítulo 6) en el elemento al que se hace referencia y su contenido. Los selectores CSS2 se pueden aplicar a los elementos originales (es decir, referenciados) porque son parte de la estructura formal del documento. Los selectores de CSS2 no se pueden aplicar al árbol DOM (conceptualmente) clonado porque sus contenidos no son parte de la estructura formal del documento.

Probé algunas soluciones con el uso: hover y / o la syntax del selector de atributos [] y tuve poca suerte, pero puede haber una solución allí.

Tal vez esto pueda ayudar: https://codepen.io/AmeliaBR/post/customizable-svg-icons-css-variables

                       svg { display:inline-block; height:100px; width:100px; margin:10px; border:1px solid; background:#eee; } svg.raw { /* Default styles for the initial SVG. * Because they are defined on the , * not the individual graphics elements, * they will NOT be inherited by the  references. */ fill:rgba(255,250,220,0.4); stroke: rgba(0,0,0,0.7); stroke-width:2; } svg.icon-style-A { /* Set the fill, stroke, and color properties to be inherited by the  element: */ fill:burlywood; color:blueviolet; stroke:#222; stroke-width:0.5px; } svg.icon-style-B { /* Set the color properties: */ fill:blanchedalmond; color:lavender; stroke:white; stroke-width:1px; /* set some icon styles on the  itself: */ background:aliceblue; border-radius:20%; border:none; box-shadow:royalblue 0 0 2px; } svg.icon-style-C { /* Set the color properties: */ fill:beige; color:green; stroke:#aaa; stroke-width:1.5px; /* icon styles for the  itself: */ background:#222; border-radius:10%; border:solid gray; } 

No muy flexible, pero funcionó para mi proyecto.