Add Onclick Event To Svg Element

January 31, 2024 Post a Comment

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 svgPUBLIC"-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgxmlns='http://www.w3.org/2000/svg'version='1.1'height='600'width='820'><scripttype="text/ecmascript"><![CDATA[
      function changerect(evt) {
        var svgobj=evt.target;
        svgobj.style.opacity= 0.3;
        svgobj.setAttribute ('x', 300);
      }
    ]]>
  </script><rectonclick='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 elementfor (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

<divclass='parent'><divclass='parent-events'></div><divclass='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:

<svgrel='-1'class='**ux-year-prev**'width="15px"height="15px"style="border:0px solid"><useclass='**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.

Html5 Academy