Elemento SVG USE e: stile hover

Sto cercando di usare CSS :hover per elementi SVG incorporati da con il tag , ma non sembra funzionare: – / Ecco il mio codice:

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

Voglio che funzioni in modo tale che quando l’utente posiziona il puntatore del mouse sull’elemento incorporato, il suo elemento interno con la class “triggers” cambierà il suo stile. Funziona quando incorporo una forma direttamente da e applichiamo la class CSS a che la incorpora. Ma non funziona per nessuna class o ID all’interno del gruppo incorporato tramite .

Come sistemarlo?

O forse c’è un modo migliore per farlo?

Ho bisogno di cambiare solo questa particolare parte all’interno dell’object incorporato quando l’utente lo alza, non l’intero gruppo. È perché le diverse parti di questo gruppo avrebbero applicato stili diversi, e hanno bisogno di cambiare in modo diverso quando si passa con il mouse.

Modifica: cosa voglio ottenere

Quello che voglio ottenere è un modo per incorporare un “object libreria” da in molti posti diversi nel mio documento SVG. Alcune parti di questo object devono essere stilizzate con colors personalizzati dal CSS, perché ho bisogno di una facile personalizzazione di quei colors senza modificare il codice dell’object della libreria.

E poi ho bisogno di segnalare all’utente quando il puntatore del mouse è sopra tale object “attivo” modellando le sue parti in modo diverso: alcuni contorni luminosi qua e là per mostrare la forma delle aree cliccabili quando il puntatore del mouse è sopra di loro.

Sfortunatamente, non posso applicare lo stile ai sottoelementi dell’elemento , perché non sono sottoelementi di nel DOM (come altri già menzionati). Posso applicare alcuni stili agli elementi all’interno della sezione , perché sono nel DOM e sono indirizzabili con i selettori CSS, ma non possono essere aleggiati, perché sono invisibili, quindi applicando :hover pseudoclass a loro non funziona E non funziona neanche se questa class è applicata a , perché quindi non posso selezionare i sotto-elementi appropriati (non sono sotto-elementi di ). Quindi non ho alcun aghook per applicarli :hover pseudoclass :hover a.

Forse c’è qualche altra soluzione al mio problema?

Non è ansible indirizzare un elemento a cui si fa riferimento tramite l’uso. Le specifiche dicono:

Per i programmi utente che supportano Styling con CSS, la clonazione concettuale profonda dell’elemento referenziato in un albero DOM non esposto copia anche tutti i valori di proprietà risultanti dalla cascata CSS ([CSS2], capitolo 6) sull’elemento di riferimento e il suo contenuto. I selettori CSS2 possono essere applicati agli elementi originali (cioè riferiti) perché fanno parte della struttura formale del documento. I selettori CSS2 non possono essere applicati all’object DOM clonato (concettualmente) perché i suoi contenuti non fanno parte della struttura formale del documento.

Ciononostante, Firefox supporta l’indirizzamento di elementi “virtuali” che sono inclusi tramite wormhole. Tutti gli altri browser no.

Ciò che più browser supporta è la modifica del colore di riempimento o del tratto se si fornisce all’elemento di riferimento un valore di riempimento / tratto di currentColor e quindi si modifica la proprietà del color dell’elemento su hover. Così:

            

Questo sembra essere secondo le specifiche:

Per i programmi utente che supportano Styling con CSS, la clonazione concettuale profonda dell’elemento referenziato in un albero DOM non esposto copia anche tutti i valori di proprietà risultanti dalla cascata CSS ([CSS2], capitolo 6) sull’elemento di riferimento e il suo contenuto. I selettori CSS2 possono essere applicati agli elementi originali (cioè riferiti) perché fanno parte della struttura formale del documento. I selettori CSS2 non possono essere applicati all’object DOM clonato (concettualmente) perché i suoi contenuti non fanno parte della struttura formale del documento.

Ho provato qualche soluzione con l’uso: hover e / o la syntax del selettore [] degli attributi e ho avuto poca fortuna ma potrebbe esserci una soluzione lì.

Forse questo può aiutare: 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; } 

Non molto flessibile ma ha funzionato per il mio progetto.