title: Including JavaScript in SVG
body: <p>I am trying to create an interactive SVG code with JavaScript, by embedding the JavaScript in the SVG. I don't know if this is the right way to do this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg width="100%" height="100%" version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  onkeypress="move()"&gt;
  &lt;script type="text/javascript"&gt;
      &lt;![CDATA[
      var x;
      var y;
      function move()
      {
          x = new Number(svg.getElementsByTagName("circle")[0].getAttribute("cx"));
          y = new Number (svg.getElementsByTagName("circle")[0].getAttribute("cy"));
          switch (event.keyCode)
          {
              case 119:
              y--;
              y = y.toString();
              svg.getElementsByTagName("circle").setAttribute("cy",y);
              break;
              case 115:
              y++;
              y = y.toString();
              svg.getElementsByTagName("circle").setAttribute("cy",y);
              break;
              case 97:
              x--;
              x = x.toString();
              svg.getElementsByTagName("circle").setAttribute("cx",x);
              break;
              case 100:
              x++;
              x = x.toString();
              svg.getElementsByTagName("circle").setAttribute("cx",x);
              break;
              default:
          }
      }
      ]]&gt;
  &lt;/script&gt;
  &lt;rect x="0" y="0" height="500" width="500" style="stroke-width:1; stroke:black; fill:white"&gt;&lt;/rect&gt;
  &lt;circle cx="250" cy="250" r="50" stroke="red" stroke-width="1" fill="red"&gt;&lt;/circle&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>It is supposed to have a ball that moves with wasd, but the ball doesn't move. What am I doing wrong?</p>