homepage Welcome to WebmasterWorld Guest from 54.145.243.51
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript & svg object
how to move a svg object with javascript
ingen



 
Msg#: 4459349 posted 9:23 am on May 30, 2012 (gmt 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... :)

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4459349 posted 1:14 pm on May 30, 2012 (gmt 0)

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.

ingen



 
Msg#: 4459349 posted 3:24 pm on May 30, 2012 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved