Sunday, February 26, 2012, 12:18 AM
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
the baseVal will give you a SVGLength
But change its value is even easier
document.getElementById("rct").setAttribute("x", 150);
Here a example ... ength.html :

Let's move this black square now !

<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)" />


<script type="text/javascript">
var rct2x =-99;
var rct2y =-99;
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;


Add Comment

Fill out the form below to add your own comments.

Insert Special:

Moderation is turned on for this blog. Your comment will require the administrators approval before it will be visible.