title: Add onclick event to SVG element
body: <p>I found this example in a SVG tutorial that explains how you can use an <code>onclick</code> event handler for a SVG element. It looks like the code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'&gt;
  
    &lt;script type="text/ecmascript"&gt;&lt;![CDATA[
        function changerect(evt)
        {
          var svgobj=evt.target;
          svgstyle = svgobj.getStyle();
          svgstyle.setProperty ('opacity', 0.3);
          svgobj.setAttribute ('x', 300);
        }
      ]]&gt;
    &lt;/script&gt;
  
    &lt;rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'
          height='100' /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, this doesn't seem to work. Nothing happens when I click on the element.</p>
  
  <p>Perhaps it is important to mention the fact that I am displaying the SVG from inside a PHP script, using <code>echo</code>. Also, note that the content generated by the PHP script is brought into the page using AJAX and <code>XMLHttpRequest()</code>.</p>
  
  <p>Could this perhaps have anything to do with it? Thanks a lot for any help. </p>