Cursore: puntatore; sull'elemento svg non funziona

Question

Nel mio sito Web utilizzo elementi svg. A volte ho bisogno che siano cliccabili, quindi voglio puntatore su di loro.

Tuttavia l'aggiunta di classe CSS o uno stile

cursor: pointer; 

non funziona.

Questo è l'elemento di esempio

<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object> 

sembra che semplicemente non Worki con SVG. Qualcuno sa come risolvere o come aggirarlo?

Answer 1

Come indica il commento di AmeliaBR, è necessario aggiungere questo stile all'interno di SVG <object>.

E a meno che il tuo SVG non sia molto semplice, potresti avere lo stesso problema che avevo io: vedere solo un puntatore quando si passa con il mouse su una delle forme in SVG, ma non quando ci si trova tra le forme.

(In alcuni casi si potrebbe desiderare che il comportamento, ma per un wordmark, per esempio, in genere si desidera che l'intero rettangolo per essere cliccabili, non solo le singole lettere.)

per rendere l'intero rettangolo di cliccabile, aggiungi svg { cursor: pointer; }. Se si desidera solo elementi specifici cliccabile, assegnare loro un nome per classe:

<svg ...> 
    <style> 
    svg { cursor: pointer; } /* whole rectangle */ 

    /* OR */ 

    .element-name { cursor: pointer; } /* specific elements */ 
    </style> 
    ... 
</svg> 

Answer 2

Se l'aggiunta di "cursor: pointer" direttamente all'elemento svg non funziona, è possibile provare ad aggiungere un elemento trasparente (Pseudo elementi direttamente sulla object tag non funziona) con le stesse dimensioni dell'SVG, che è assolutamente posizionato su SVG.

a.svg-cursor:before { 
 
content: ""; 
 
display: block; 
 
position: absolute; 
 
background-color: transparent; 
 
cursor: pointer; 
 
/* plus width and height of the SVG */ 
 
}

<a href="#" class="svg-cursor"> 
 
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" es-character="male2"></object> 
 
</a>

Oppure si può prendere un img invece di object e aggiungere il "cursor: pointer" in stile alla IMG:

<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />

Answer 3

per lo stile singoli elementi nella tua SVG puoi usare Javascript o usare CSS all'interno dell'immagine nel tag defs o fare riferimento a un foglio di stile esterno.

<svg ...> 
    <defs> 
    <style type="text/css"><![CDATA[ 
     .myfigureclass { 
     cursor: pointer; 
     } 
    ]]></style> 
    </defs> 

Verificare this link per ulteriori informazioni.

È inoltre possibile utilizzare un foglio di stile esterno per lo SVG come questo:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<?xml-stylesheet type="text/css" href="style.svg.css" ?> 

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    ...> 
(...) 
</svg> 

Controllare this link per ulteriori informazioni.

Answer 4

Una delle soluzioni più semplici può essere quella di utilizzare tag img, invece di tag object

<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" /> 

anche se, idealmente è possibile incorporare lo svg nel codice HTML. Ciò non consente di memorizzare nella cache i file svg, quindi ho trovato utilizzando javascript per caricare il file svg come testo e inserirlo nel DOM consentito per la memorizzazione nella cache e ancora ottenuto l'SVG direttamente nel DOM in modo che potesse utilizzare tutti gli stili CSS da la tua pagina.

Answer 5

penso che questa è la soluzione più semplice tra gli altri:

1) avvolgere SVG in <a> per renderlo cliccabile:

<a href="#"> 
    <object> 
     <embed src="img.svg"></embed> 
    </object> 
</a> 

2) rimuovere eventi del puntatore da object elemento in modo scatti saranno consegnati al <a> direttamente:

object{ 
    pointer-events: none; 
} 

a{ 
    display: inline-block; /* or block if you need */ 
}