Aggiungi evento onclick all'elemento SVG

Question

Ho trovato questo esempio in un tutorial SVG, che spiega come è possibile utilizzare un gestore di eventi onclick per un elemento svg. È simile al seguente codice:

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> 

<script type="text/ecmascript"><![CDATA[ 
function changerect(evt) 
{ 
var svgobj=evt.target; 
svgstyle = svgobj.getStyle(); 
svgstyle.setProperty ('opacity', 0.3); 
svgobj.setAttribute ('x', 300); 
} 
]]> 
</script> 

<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100' 
height='100' /> 
</svg> 

Tuttavia, questo non sembra funzionare. Non succede nulla quando clicco sull'elemento.

Forse è importante menzionare il fatto che sto visualizzando lo svg da dentro uno script php, usando echo. inoltre che il contenuto generato dallo script php viene portato nella pagina utilizzando AJAX e:

XMLHttpRequest() 

questo potrebbe forse avere a che fare con esso? Grazie mille per qualsiasi aiuto.

Answer 1

Sembra che tutto il javascript deve essere incluso all'interno di svg affinché venga eseguito. Non ero in grado di fare riferimento a nessuna funzione esterna o librerie. Ciò significava che il tuo codice si rompeva a svgstyle = svgobj.getStyle();

Questo farà ciò che stai tentando.

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> 

<script type="text/ecmascript"><![CDATA[ 
    function changerect(evt) { 
     var svgobj=evt.target; 
     svgobj.style.opacity= 0.3; 
     svgobj.setAttribute ('x', 300); 
    } 
]]> 
</script> 

<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' /> 
</svg> 

Answer 2

Demo in JSFiddle

var XMAX = 500; 
var YMAX = 500; 
var _xx=10; 
var _reg=100; 
var _l=10; 
// Create PATH element 
for(var x=1;x<20;x++) 
{ 
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
pathEl.setAttribute('d','M'+_l+' 100 Q 100 300 '+_l+' 500'); 
pathEl.style.stroke = 'rgb('+(_reg)+',0,0)'; 
pathEl.style.strokeWidth = '5'; 
pathEl.style.fill = 'none'; 
    $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})}); 

$('#mySvg').append(pathEl); 
_l+=50; 
} 

Answer 3

Assicurarsi di aggiungere className/id-<use>; o per utilizzare il percorso SVG/elemento effettivo anche, se si sta rilevando al di fuori del campo di applicazione di script SVG:

<svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg> 

Answer 4

Se non è necessario cliccare specifiche parti del svg questo potrebbe essere una possibile soluzione:

Metti un div in cima e aggiungi eventi a quel div. z-index non è necessario se l'elemento svg è prima del tag div nella struttura html.

HTML

<div class='parent'> 
    <div class='parent-events'></div> 
    <div class='my-svg'><svg></svg></div> 
</div> 

CSS

.parent { 
    position: relative; 
} 

.my-svg { 
    position: relative; 
    z-index: 0; 
} 

.parent-events { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 1 
} 

Javascript

const eventArea = document.querySelector('.parent-events'); 
eventArea.addEventListeners('click',() => { 
    console.log('clicked'); 
});