我正在编写一个程序,用于在加载时更改SVG元素的x值(最终目的是成为映射程序的一部分)。我的代码在尝试访问每个元素的特定值时被卡住了,我不确定为什么。
代码如下:
<html>
<body>
<svg width="12cm" height="12cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect id="a" x="40" y="180" width="30" height="30" fill="#000"/>
<rect id="b" x="100" y="180" width="30" height="30" fill="#000"/>
<rect id="c" x="160" y="180" width="30" height="30"
fill="#000"/>
<rect id="d" x="220" y="180" width="30" height="30" fill="#000"/>
</svg>
<script>
var array1 = [a, b, c, d];
array1.forEach(function(element) {
console.log(element);
var xValue = document.getElementById(element).style.x;
xValue = xValue * 2;
document.getElementById(element).style.x = xValue;
console.log("done");
});
</script>
</body>
</html>
我可以断定JavaScript正在访问SVG中的信息,因为控制台使用数组中的ID记录了整个元素。但是,我也可以看出,JavaScript在尝试访问元素的特定属性时被卡住了,因为控制台只记录代码的第一行,而且只记录数组中的第一个元素。
最终,应该发生的是,JavaScript从数组中获取一个ID,访问该元素,访问该元素的某些属性(在本例中为x值),对该属性执行转换,并对其进行更改(因此,如果此操作有效,则每个SVG元素的x位置将偏移2倍)。
我确信这里的问题出在我的语法上,但是我不太明白为什么。我试着使用.innerHTML
,但没有任何帮助。这里有一个CodePen来看看它的实际效果。如果您打开控制台,您可以看到第一行日志:https://codepen.io/anon/pen/GBqNrK?editors=1111
谢谢你的帮助。
发布于 2018-07-23 22:27:26
多亏了来自Pointy的提示和一些快速的调试,我已经弄清楚了!
以下是解决方案:首先,没有理由使用.getElementById()
,因为我已经访问了元素。我还必须使用.getAttribute()
而不是.style.x
,将*
更改为=*
,并使用.setAttribute("x", xValue)
更改该值。
下面是最终的功能代码:
<html>
<body>
<svg width="12cm" height="12cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect id="a" x="40" y="180" width="30" height="30" fill="#000"/>
<rect id="b" x="100" y="180" width="30" height="30" fill="#000"/>
<rect id="c" x="160" y="180" width="30" height="30"
fill="#000"/>
<rect id="d" x="220" y="180" width="30" height="30" fill="#000"/>
</svg>
<script>
var array1 = [a, b, c, d];
array1.forEach(function(element) {
console.log(element);
var xValue = element.getAttribute("x");
console.log(xValue);
xValue *= 2;
console.log(xValue);
element.setAttribute("x", xValue);
console.log(xValue);
console.log("done");
});
</script>
</body>
</html>
使用大量用于调试的console.log()
,代码在哪里停止以及值是如何变化的。
下面是一个显示程序工作的代码:https://codepen.io/anon/pen/GBqNrK?editors=1111
希望这最终能对某些人有所帮助!
https://stackoverflow.com/questions/51480724
复制相似问题