Add onclick event to SVG element

Question

I found this example in a SVG tutorial, that explains how you can use an onclick event handler for a svg element. It looks like the code below:

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

However this doesn't seem to work. Nothing happens when I click on the element.

Perhaps that it is important to mention the fact that I am displaying the svg from inside a php script, using echo. Also that the content generated by the php script is brought into the page using AJAX and:

 XMLHttpRequest()

Could this perhaps have anything to do with it? Thanks a lot for any help.

Answer 1

Make sure to add className/id to <use>; or to use the actual SVG path/element also, if you're detecting outside of SVG script scope:

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

If you don't need to click specific parts of the svg this might be a possible solution:

Put a div on top and add events to that div. z-index is not needed if the svg element is before the div tag in the html structure.

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');
});

Answer 3

It appears that all of the javascript must be included inside of the svg for it to run. I was unable to reference any external function, or libraries. This meant that your code wass breaking at svgstyle = svgobj.getStyle();

This will do what you are attempting.

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

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 5

I would suggest this method of onclick event handler for a svg element:

var svgobj = parent_svg.find('svg')[0].children;

for (i = 0; i < svgobj.length; i++) {
   element = svgobj[i];
   element.style = "cursor: pointer;";
   $(element).click(function(evt){console.log($(this))});
}  

Cek first whether your svgobjis passed to console.log when it is getting an onclick event handler. From that point you can pass to whatever functions to handle the element.

You may see on how it is working at a sample here:

https://jsfiddle.net/chetabahana/f7ejxhnk/20/

Note on how to use this sample:
- Change the status on the SVG Diagram to Printed option,
- Click one of the element then cek the output in your console.