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:
<?xml version=1.0 encoding=UTF-8 standalone=no?>
<!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd>
<svg width=100% height=100% version=1.1
xmlns=http://www.w3.org/2000/svg
onkeypress=move()>
<script type=text/javascript>
<![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:
}
}
]]>
</script>
<rect x=0 y=0 height=500 width=500 style=stroke-width:1; stroke:black; fill:white></rect>
<circle cx=250 cy=250 r=50 stroke=red stroke-width=1 fill=red></circle>
</svg>
It is supposed to have a ball that moves with wasd, but the ball doesn't move. What am I doing wrong?