Dodaj zdarzenie onclick do elementu SVG

Question

Znalazłem ten przykład w samouczku SVG, który wyjaśnia, w jaki sposób można użyć procedury obsługi zdarzeń onclick dla elementu svg. Wygląda jak poniższy kod:

<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> 

To jednak nie działa. Nic się nie dzieje po kliknięciu elementu.

Być może ważne jest, aby wspomnieć o tym, że wyświetlam svg z poziomu skryptu php, używając echa. także, że treść generowana przez skrypt php jest doprowadzana do strony z wykorzystaniem technologii AJAX oraz:

XMLHttpRequest() 

Czy to może mieć coś wspólnego z tym? Wielkie dzięki za pomoc.

Answer 1

Wygląda na to, że cały javascript musi być dołączony do svg, aby mógł zostać uruchomiony. Nie mogłem odwoływać się do żadnej zewnętrznej funkcji ani bibliotek. Oznaczało to, że Twój kod złamał się pod svgstyle = svgobj.getStyle();

Spowoduje to wykonanie tego, co próbujesz.

<?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

Upewnij się, aby dodać className/id do <use>; lub użyć rzeczywistej ścieżki SVG/elementu również, jeśli wykrywanie poza zakresem skryptu 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

Jeśli nie trzeba kliknąć konkretne części SVG to może być możliwe rozwiązanie:

Umieść div na górze i dodaj wydarzenia do tego div. Indeks z-index nie jest potrzebny, jeśli element svg znajduje się przed znacznikiem div w strukturze 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'); 
});