title: Uncaught ReferenceError: function is not defined onSVGLoad
body: <p>I don't know why this happens, but when I have:</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;
   viewBox=&quot;0 0 30 20&quot;
   onload=&quot;makeDraggable(evt)&quot;&gt;
   &lt;/svg&gt;
  </code></pre>
  <p>I got this error:</p>
  <pre><code>Uncaught ReferenceError: makeDraggable is not defined
      onSVGLoad
  </code></pre>
  <p>but when I change it to:</p>
  <pre><code>    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;
   viewBox=&quot;0 0 30 20&quot;
   onload=&quot;makeDraggable(evt)&quot;&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  &lt;/script&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>the error is gone.</p>
  <p><strong>Update</strong>
  This is my full html code:</p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Garden Tracker&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;toolbar&quot;&gt;
          &lt;button onclick=&quot;startCreatingField()&quot;&gt;+&lt;/button&gt;
          &lt;button onclick=&quot;finishCreatingField()&quot;&gt;tick&lt;/button&gt;
      &lt;/div&gt;
      
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;
       viewBox=&quot;0 0 width height&quot; id=&quot;garden-map&quot; onload=&quot;makeDraggable(evt)&quot;&gt;
      &lt;script type=&quot;text/javascript&quot;&gt; //THIS IS WERE THE ERROR HAPPENS
      &lt;/script&gt;
      &lt;polygon class=&quot;draggable&quot; fill=&quot;#ffa500&quot; points=&quot;169 156 174 182 150 170 126 182 131 156 112 138 138 134 150 110 162 134 188 138&quot;/&gt; //JUST FOR TEST
  &lt;/svg&gt;
  &lt;/body&gt;
  &lt;script src=&quot;magic.js&quot;&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>