Добавить событие onclick в элемент SVG

Question

Я нашел этот пример в учебнике SVG, в котором объясняется, как вы можете использовать обработчик события onclick для элемента svg. Он выглядит следующим образом:

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

Однако это не работает. Ничего не происходит, когда я нажимаю на элемент.

Возможно, важно отметить тот факт, что я отображаю svg из скрипта php, используя эхо. Кроме того, что содержание генерируется с помощью сценария PHP приводится в страницу с помощью AJAX и:

XMLHttpRequest() 

Может ли это возможно иметь ничего общего с ним? Большое спасибо за любую помощь.

Answer 1

Похоже, что весь javascript должен быть включен внутри svg для его запуска. Я не мог ссылаться на любую внешнюю функцию или библиотеки. Это означало, что ваш код разбился на svgstyle = svgobj.getStyle();

Это сделает то, что вы пытаетесь.

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

Убедитесь, что добавить className/id к <use>; или использовать фактический SVG путь/элемент также, если вы обнаружения за пределами сферы 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

Если вам не нужно нажимать определенные части SVG это может быть возможным решением:

Поместите div сверху и добавьте события в этот div. z-index не требуется, если элемент svg находится перед тегом div в структуре 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'); 
});