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 it is important to mention the fact that I am displaying the SVG from inside a PHP script, using echo. Also, note 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

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>

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