title: SVG element onclick gives ReferenceError: function is not defined
body: <p>I'm trying to add an onclick event to an svg element.</p>
  
  <p>So I added a single onclick attribute to a specific element below. However it does not appear to be working.</p>
  
  <p>I get the following errer: "Uncaught ReferenceError: clickCounty is not defined"</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script&gt;
                  function clickCounty(e)
                  {
                      console.log("clickCounty");
                  }
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="canvas"&gt;
              &lt;object data="custom.svg" type="image/svg+xml"&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>custom.svg</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;rect onclick="clickCounty('test')" x="10" y="10" height="100" width="100" style="stroke:#006600; fill: #00cc00"/&gt;
  &lt;/svg&gt;
  </code></pre>