Question

以下代码包含HTML，JavaScript和SVG。在SVG中，我创建了几个功能并将其嵌入到我的HTML主体中。 JavaScript用于交互，使用户可以操作一些变量并在地图上查看结果。例如，通过插入总体，目标城市的符号大小将发生变化。我对圈子没有问题，因为它的中心将被修复。当我用矩形符号改变城市人口时，我的问题出现了。通过改变它的大小，它不再在线上（矩形的中心应该在线的交叉点上）。当我改变它的尺寸时，我试图用JS改变SVG中矩形（X，Y）的坐标。但是有些不对劲。

<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"));

Answer 1

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

为什么我更改SVG功能的坐标不是我想要的？

1 个答案: