1

以下代码包含 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"));
4

1 回答 1

2

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;
}
于 2012-12-07T22:04:22.773 回答