Add onclick event to SVG element
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>
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; }
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');});