Add Onclick Event To SVG Element

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: However, this doesn't seem to work.

Solution 1:

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

Solution 2:

Demo in JSFiddle

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

Solution 3:

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

Solution 4:

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>

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