| Javascript & svg object
how to move a svg object with javascript |
ingen
msg:4459351 | 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
msg:4459413 | 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:4459499 | 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>
|
|
|
