以下代码包含HTML、JavaScript和SVG。在SVG中，我创建了几个特性并将其嵌入到HTML主体中。JavaScript用于交互，使用户可以操作一些变量并在地图上查看结果。例如，通过插入人口，目标城市的符号大小将发生变化。我对圆没有问题，因为它的中心会被修复。当我用矩形符号改变城市人口时，我的问题就出现了。通过改变它的大小，它将不再在直线上(矩形的中心应该在直线的交点上)。当我改变SVG中矩形(X，Y)的尺寸时，我试图使用JS来改变它的坐标。但是有问题。
<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>
为了简化调试，我设置了三个警报来显示运行的不同阶段。。。第三个应该是117，但它将是1143，这意味着第一个x 114乘以10，然后加上3…
问题：此代码有什么问题？！！！问题是因为桌子吗？！！既然主坐标是在SVG中定义的，我如何根据表调整坐标
解决方案：
我终于发现了为什么会发生这种事。这是因为X和Y的值被视为字符串，应该被解析为整数，然后添加到新值，如下所示：
init1 = parseInt(T.getAttribute("x"));
getAttribute返回字符串而不是数字。当您在字符串上使用+运算符时，它们是连续的，而不是转换为数字并添加数值。(其他运算符转换为字符串，因为除了具有数字参数之外，您无法以任何其他方式真正解释-或/或*)。
解决方案是将字符串属性转换为这样的数字。。。
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;
}