Javascript & svg object

I have 2 html pages.
The first one sends 2 parameters (a svg object coordinates x and y, where x = left and y = up) to the second html page that contents a svg object.
The code of the 1st page is

<html>
<head>
</head>
<body>
<a href="list.html?left=100&up=80">Click!</a>
</body>
</html>

The code of the 2nd page is

<html>
<head>
<script type="text/javascript">
// Create an array to keep query string variables
var qsParm = new Array();
// This function gets query string values from current page
// and stores them in above defined array
function qs()
 {
 var query = window.location.search.substring(1);
 var parms = query.split('&');
 
 for (var i=0; i<parms.length; i++) {
 var pos = parms[i].indexOf('=');
 if (pos > 0)
 {
 var key = parms[i].substring(0,pos);
 var val = parms[i].substring(pos+1);
 qsParm[key] = val;
 }
 }
 }

qsParm['levo'] = null;
qsParm['verh'] = null;
// Call function – get query strings
qs();


window.onload = function objMove() { /* placing a svg object to the received coordinates x and y */
 var quadra = document.getElementById("rele");
 var currentX = rele.getAttribute("x");
 currentX.setAttribute("x", qsParm['left']);
 var currentY = rele.getAttribute("y");
 currentY.setAttribute("y", qsParm['up']);
 }
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1200"
 xmlns:xlink="http://www.w3.org/1999/xlink">


<rect id="rele" x="81.0" y="120.0" transform="matrix(1.0 0.0 0.0 1.0 -2.0 78.0)" fill="none" width="55.0" height="55.0"
 stroke="#ff0000" stroke-width="3"/>

</svg>
</body>
</html>

But a svg object doesn't move to the new coordinates (x, y)?
What is wrong? Can anybody help me?

P.S. Sorry for maybe fool questions 'cause I'm a javascript newbie... :)

<html> <head> <script type="text/javascript"> // Create an array to keep query string variables var qsParm = new Array(); // This function gets query string values from current page // and stores them in above defined array function qs() { var query = window.location.search.substring(1); var parms = query.split('&'); for (var i=0; i<parms.length; i++) { var pos = parms[i].indexOf('='); if (pos > 0) { var key = parms[i].substring(0,pos); var val = parms[i].substring(pos+1); qsParm[key] = val; } } } qsParm['left'] = null; qsParm['up'] = null; qsParm['visibility'] = null; // Call function – get query strings qs(); // For example show levo, verh //document.write(qsParm['left']); //document.write(qsParm['up']); function objPos() { svgobj.style.left = qsParm['left']; svgobj.style.top = qsParm['up']; rele.style.visibility = qsParm['visibility']; } </script> </head> <body onLoad="objPos();"> <div id="svgobj" style="position:absolute; z-index:100; left:-100; top:-100; width:55px; height:55px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect id="rele" visibility="hidden" fill="none" width="55.0" height="55.0" stroke="#ff0000" stroke-width="3"/> </svg> </div> </body> </html>

Javascript & svg object

how to move a svg object with javascript

ingen

Fotiman

ingen

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week