Welcome to WebmasterWorld Guest from 107.20.104.110

Forum Moderators: open

Message Too Old, No Replies

Javascript & svg object

how to move a svg object with javascript

     
9:23 am on May 30, 2012 (gmt 0)

New User

joined:May 30, 2012
posts: 2
votes: 0


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... :)
1:14 pm on May 30, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


I don't have much experience with SVG, but my best guess would be that setting the x and y attributes on the HTML element onload might have no effect. That is, the SVG image may already have rendered at this point. You may have to set the transform attribute. Wish I could be of more help, but that's where I'd start.
3:24 pm on May 30, 2012 (gmt 0)

New User

joined:May 30, 2012
posts: 2
votes: 0


I think I've solved this problem. I've just inserted SVG object in <DIV></DIV> element and modified the code a little bit.

<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>