Add Onclick Event To SVG Element

Answer :

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>

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