Maybe you've already played with the SVG tags.
Easy ... <svg> <rect id="rct" x="100" y="100" width="100" height="100"/> </svg>
Easy for a first try.
Then, we want to modify or get the value of X and there! a strange object appeared ...SVGAnimatedLength
At this point you can get the value of X this way
document.getElementById("rct").baseVal.value
the baseVal will give you a SVGLength
But change its value is even easier
document.getElementById("rct").setAttribute("x", 150);
Here a example http://celermajer.net/javascriptTest/SV ... ength.html :

Let's move this black square now !




<svg>
<rect id="rct1" x="55" y="25" width="150" height="150" style="fill:rgb(100,100,100)"/>
<rect id="rct2" x="45" y="15" width="150" height="150" style="fill:rgb(0,0,0)" />

</svg>



<script type="text/javascript">
var rct2x =-99;
var rct2y =-99;
$("#rct2").mousedown(rct1mousedown);
window.onmouseup = function (event) {rct1mouseup(event);} ;
function SVGAnimatLengthVal(o) {
oo = o.baseVal.value;
return oo;
}
window.onmousemove = function (event) {
if (rct2x==-98) {
rct2x = event.screenX;
rct2y = event.screenY;
}
if (rct2x!=-99) {
rct = document.getElementById("rct2");

var x = SVGAnimatLengthVal(document.getElementById("rct2").x) + event.screenX -rct2x ;
var y = SVGAnimatLengthVal(document.getElementById("rct2").y)+ event.screenY -rct2y ;
rct.setAttribute("x", x);
rct.setAttribute("y", y);
rct2x = event.screenX;
rct2y = event.screenY;
}
};
function rct1mouseup(event) {
$("#rct2").css("fill", "rgb(0,0,0)");
rct2x =-99;
}
function rct1mousedown(event) {
$("#rct2").css("fill", "rgb(0,0,255)");
rct2x = -98;
}

</script>

With the canvas Object of HTML 5 you can do a lot thing.
Here a Tetris example download it the sources codes is your !

Here a Tetris in Java Click here
All the sources codes are in the jar file(open it like a zip file).
I am working on a nice tetris in javascript HTML5 an the canvas tag ... for soon

This is a small example of a canvas animation