CODEWITHSUNDEEP
javascripthtmlsvgcoordinates
msc87
msc87

Reputation: 1029

why the coordinate of my SVG feature is not what I want when I change it?

the following code contains HTML, JavaScript and SVG. in SVG, I created several features and embedded it in my HTML body. JavaScript is used for interactivity, which enables user to manipulate some variables and see the results on the map. for example, by inserting the population, the size of symbols for the target city will change. I don't have problem with circle since its center will be fix. my problem arises when I change the population of city with rectangle symbol. by changing its size, it wont be on the line anymore (center of rectangle should be on the intersection of lines). I tried to change the coordinates of rectangle(X,Y) in SVG using JS when I change its dimension. but there is something wrong.

<HTML>
<head>

<title>Population</title>

<script language="javascript" type="text/javascript">


var bakaInitPop=100;

var SunnInitPop=5000;


function changeSymbol(){

var initFontSize;
var radius;
var dimention;
var popsize=document.getElementById("population").value;
var svg=document.getElementById("object1");
var cities=document.getElementById("citylist");
var selectedCity=cities.options[cities.options.selectedIndex].value;
var initx1;
var inity1;


if(selectedCity=="Bakalund"){
    var T = svg.getElementById("c");
    radius=T.getAttribute("r");
    T.setAttribute("r",(popsize/bakaInitPop)*radius);
    return bakaInitPop=popsize;
}
else{
    var T = svg.getElementById("rs");
    dimention=T.getAttribute("width");
    initx1 =T.getAttribute("x");
    alert(initx1);
    inity1=T.getAttribute("y");
    var cal =(popsize/SunnInitPop)*dimention;
    alert(cal);
    T.setAttribute("width",cal);
    T.setAttribute("height",cal);
    var newx1 = initx1 +((dimention-cal)/2);
    alert(newx1);
    var newy1 = inity1 +((dimention-cal)/2);
    T.setAttribute("x",newX);
    T.setAttribute("y",newY);
    return SunnInitPop=popsize;
}

}

</script>
</head>
<body>
<form id="form1">
<table width="500" height="400">
<tr>

<td>
<svg id="object1" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" width="300" height="300" stroke="black" stroke-width="4" fill="white"/>
        <polygon points="10,10 160,160 10,310" stroke="yellow" stroke-width="2" fill="yellow"/>
        <polygon points="10,10 310,310 310,10" stroke="green" stroke-width="2" fill="green"/>
        <polygon points="10,310 310,310 160,160" stroke="green" stroke-width="2" fill="green"/>
        <path d="M160 10 L120 80 L180 160 L170 210" fill="green" stroke="black" stroke-width="2"/>
        <line x1="10" y1="10" x2="310" y2="310" stroke="blue" stroke-width="4"/>
        <g id="bakalund">
        <circle id="c" cx="170" cy="210" r="5" stroke="black" stroke-width="2" fill="red" />
        <text id="c1" x="170" y="230" font-family="Verdana" font-size="10" fill="black" > Bakalund </text>
        </g>
        <g id="sunne">
        <rect id="rs" x="114" y="74" width="12" height="12" stroke="black" stroke-width="2" fill="red"/>
        <text id="rs1" x="130" y="80" font-family="Verdana" font-size="15" fill="black" font-weight="bold"> Sunne </text>
        </g>
    </svg>

</td>
</tr>
<tr>
<td>
<label>City</label>
<select id="citylist">
<option id="0"></option>
<option id="baka">Bakalund</option>
<option id="sunn">Sunne</option>
</select>
</td>
</tr>
<tr>
<td>
<label><b>Population</b></label>
<input type="text" id="population" size="10" maxlength="30"/>
<input type="button" id="set" name="set" value="set" onclick='changeSymbol();'>
</td>
</tr>
</table>
</form>
</body>
</HTML>

to make debugging easy, I put three alerts to show different stages of running...the third one should be 117 but it will be 1143 which means the first x 114 is multiplied to 10 and then is added to 3.....

Problem: what is wrong with this code?!!! is the problem because of table?!! how can I adapt the coordinates based on the table since the primary coordinates are defined in SVG?!!!!

Solution:

I finally discovered why it happens. it is because the values of X and Y are considered as strings and should be parsed to Integers and then added to new values as follows:

    init1 = parseInt(T.getAttribute("x"));

Upvotes: 1

Views: 938

Answers (1)

Robert Longson
Robert Longson

Reputation: 123996

getAttribute returns a string rather than a number. When you use the + operator on strings they contcatenate rather than converting to numbers and adding the numeric value. (Other operators convert to strings as you can't really interpret - or / or * in any other way than having numeric arguments).

The solution is to convert the string attributes to numbers like this...

if(selectedCity=="Bakalund"){
    var T = svg.getElementById("c");
    radius=Number(T.getAttribute("r"));
    T.setAttribute("r",(popsize/bakaInitPop)*radius);
    return bakaInitPop=popsize;
}
else{
    var T = svg.getElementById("rs");
    dimention=Number(T.getAttribute("width"));
    initx1 =Number(T.getAttribute("x"));
    alert(initx1);
    inity1=Number(T.getAttribute("y"));
    var cal =(popsize/SunnInitPop)*dimention;
    alert(cal);
    T.setAttribute("width",cal);
    T.setAttribute("height",cal);
    var newx1 = initx1 +((dimention-cal)/2);
    alert(newx1);
    var newy1 = inity1 +((dimention-cal)/2);
    T.setAttribute("x",newX);
    T.setAttribute("y",newY);
    return SunnInitPop=popsize;
}

Upvotes: 2

Related Questions