css - img - SVG USE elemento y: estilo de desplazamiento
svg on img tag (3)
Estoy tratando de usar CSS :hover pseudoclase para <defs> elementos SVG incrustados desde la <defs> by <use> , 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 <defs> una forma de <defs> directamente y aplico la clase CSS a la <use> que la incrusta. Pero no funciona para ninguna clase o ID dentro del grupo incrustado 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" de <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", diseñando sus partes de manera diferente: algunos contornos brillantes aquí y allá para mostrar la forma de las áreas donde se puede hacer clic cuando el puntero del mouse está sobre ellas.
Desafortunadamente, no puedo aplicar el estilo a los subelementos del elemento <use> , porque no son subelementos de <use> en el DOM (como ya se mencionó en otros). Puedo aplicar algunos estilos a los elementos dentro de la sección <defs> , porque están en el DOM y son direccionables con los selectores de CSS, pero no se pueden desplazar, porque son invisibles, por lo que se aplican :hover pseudoclase para ellos no funciona Y tampoco funciona si esta clase se aplica a <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 pseudoclase a.
Tal vez hay alguna otra solución a mi problema?
Esto parece ser de acuerdo a las especificaciones:
Para los agentes de usuario que admiten el estilo 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 forman parte de la estructura formal del documento. Los selectores de CSS2 no se pueden aplicar al árbol de DOM clonado (conceptualmente) porque su contenido no forma parte de la estructura formal del documento.
Intenté algunas soluciones alternativas con el uso: hover y / o la sintaxis del selector de atributos y tuve poca suerte, pero puede haber una solución allí.
No se puede abordar un elemento al que se hace referencia mediante el uso. Las especificaciones dicen:
Para los agentes de usuario que admiten el estilo 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 forman parte de la estructura formal del documento. Los selectores de CSS2 no se pueden aplicar al árbol de DOM clonado (conceptualmente) porque su contenido no forma parte de la estructura formal del documento.
Sin embargo, Firefox admite el direccionamiento de elementos "virtuales" que se incluyen a través de un agujero de uso. Todos los otros navegadores no lo hacen.
Lo que más admite el navegador es cambiar el color de relleno o de trazo si le currentColor elemento al que se hace referencia un valor de relleno / trazo de currentColor y luego cambia la propiedad de color del elemento <use> al pasar el cursor. Al igual que:
<svg version="1.1" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
#p0 {fill:currentColor}
#use1:hover {color:green}
#use2:hover {color:red}
#use3:hover {color:blue}
</style>
<defs>
<polygon id="p0" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active" />
</defs>
<g transform="translate(70,100)">
<use xlink:href="#p0" transform="translate(40,0)" id="use1" />
<use xlink:href="#p0" transform="translate(250,0)" id="use2" />
<use xlink:href="#p0" transform="translate(460,0)" id="use3" />
</g>
</svg>
Esto es compatible con todos los principales navegadores (FF, Chrome, IE, Safari). Sólo a Opera no parece gustarle. La desventaja es, por supuesto, con este método solo puede cambiar un color.
Por lo tanto, un método diferente sería utilizar filtros, si solo se trata de cambiar de color. Por ejemplo, usando <feColorMatrix> , puedes transformar un color a otro usando una matriz de color, como esta:
<svg version="1.1" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
#p0 {fill: currentColor}
#use1:hover {filter: url(#filter1)}
#use2:hover {filter: url(#filter2)}
#use3:hover {filter: url(#filter3)}
</style>
<defs>
<g id="p0">
<polygon points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" fill="red" />
<rect width="50" height="70" fill="green" />
<circle cx="-20" cy="-30" r="30" fill="blue" />
</g>
</defs>
<filter id="filter1">
<feColorMatrix type="matrix" in="SourceGraphic" values="0 1 0 0 0
1 0 0 0 0
0 0 1 0 0
0 0 0 1 0" />
</filter>
<filter id="filter2">
<feColorMatrix type="matrix" in="SourceGraphic" values="0 0 1 0 0
1 0 0 0 0
0 1 0 0 0
0 0 0 1 0" />
</filter>
<filter id="filter3">
<feColorMatrix type="matrix" in="SourceGraphic" values="0 1 0 0 0
0 0 1 0 0
1 0 0 0 0
0 0 0 1 0" />
</filter>
<g transform="translate(70,100)">
<use xlink:href="#p0" transform="translate(40,0)" id="use1" />
<use xlink:href="#p0" transform="translate(250,0)" id="use2" />
<use xlink:href="#p0" transform="translate(460,0)" id="use3" />
</g>
</svg>
Sin embargo, aún no tengo suerte con Opera, y esta vez tampoco estaba contento con IE9 y Safari. Pero creo que debería ser posible con Opera y Safari, solo que hice algo no al 100% correctamente.
Quizás esto puede ayudar: https://codepen.io/AmeliaBR/post/customizable-svg-icons-css-variables
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"
class="raw">
<g id="palette">
<path d="M5,90
C5,45 40,-5 75,10
C110,25 80,95 60,95
C50,95 50,75 30,75
C20,75 17,95 12,95
C10,95 5,95 5,90 Z"/>
<g style="fill:currentColor;">
<path d="M30,50
c-10,0 -20,20 -5,15
s15,-15 5,-15z
"/>
<path d="M45,30
c-10,0 -15,15 -5,15
s10,-15 5,-15z
"/>
<path d="M70,20
c-10,0 -20,15 -5,15
s10,-15 5,-15z
"/>
<path d="M75,45
c-10,0 -20,15 -5,15
s15,-15 5,-15z
"/>
<path d="M65,65
c-10,0 -15,25 -5,20
s10,-20 5,-20z"/>
</g>
</g>
</svg>
<svg class="icon-style-A">
<use xlink:href="#palette"/>
</svg>
<svg class="icon-style-B">
<use xlink:href="#palette"/>
</svg>
<svg class="icon-style-C">
<use xlink:href="#palette"/>
</svg>
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 <svg>,
* not the individual graphics elements,
* they will NOT be inherited by the <use> 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 <use> 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 <svg> 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 <svg> itself: */
background:#222;
border-radius:10%;
border:solid gray;
}
No muy flexible pero funcionó para mi proyecto.