更多SVG问题（和Javascript）-交互性[移动矩形]

当按下键盘上的WASD键时，下面的代码将使矩形移动。它不起作用。矩形不会移动，但不会生成错误。我怎样才能做到这一点

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="90%" height="90%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<script type="text/javascript">
    <![CDATA[
    var x;
    var y;
    function move()
    {
        x = new Number(document.getElementById("player").x);
        y = new Number(document.getElementById("player").y);
        switch (event.keyCode)
        {
            case 119:
            y--;
            document.getElementById("player").y=y;
            break;
            case 115:
            y++;
            document.getElementById("player").y=y;
            break;
            case 97:
            x--;
            document.getElementById("player").x=x;
            break;
            case 100:
            x++;
            document.getElementById("player").x=x;
            break;
            default:
        }
    }
    document.documentElement.addEventListener("keypress", move, true);
    ]]>
</script>

<rect x="0" y="0" height="100%" width="100%" style="stroke-width:5; stroke:black; fill:white"></rect>
<rect x="250" y="250" id="player" height="50" width="50" style="stroke-width:1; stroke:red; fill:red"></rect>

</svg>

---

上述代码不起作用，因为它们是对象，表示随时间变化的值

使代码“工作”的最简单更改是：

更改

x=新编号（document.getElementById（“player”）.x）

到

x=新编号（document.getElementById（“player”）.x.baseVal.value）

（y也是如此）

更改

document.getElementById（“播放器”）.x=x

到

document.getElementById（“player”）.x.baseVal.value=x

（y也是如此）

这将使您的代码按预期工作。但是，您的代码通常可以根据进行改进

以下是我的写作方式（如果您真的只想一次移动一个单元）：

#玩家{笔划宽度：1；笔划：红色；填充：红色}

---

请注意，我已将

移动到

块上方，以便a）用户在脚本开始加载之前看到矩形，但更重要的是b）以便在调用

getElementById（）

之前存在矩形。如果在定义元素之前出现脚本块，则必须设置代码引用以响应

onload

或类似的事件处理程序。

上述代码不起作用，因为它们是对象，表示随时间变化的值

使代码“工作”的最简单更改是：

更改

x=新编号（document.getElementById（“player”）.x）

到

x=新编号（document.getElementById（“player”）.x.baseVal.value）

（y也是如此）

更改

document.getElementById（“播放器”）.x=x

到

document.getElementById（“player”）.x.baseVal.value=x

（y也是如此）

这将使您的代码按预期工作。但是，您的代码通常可以根据进行改进

以下是我的写作方式（如果您真的只想一次移动一个单元）：

#玩家{笔划宽度：1；笔划：红色；填充：红色}

---

请注意，我已将

移动到

块上方，以便a）用户在脚本开始加载之前看到矩形，但更重要的是b）以便在调用

getElementById（）

之前存在矩形。如果在定义元素之前出现脚本块，则必须设置代码引用以响应

onload

或类似的事件处理程序。

@vertic可能您没有看到代码中包含哪些需要更改的特定内容，并且提供了比上面所示更干净的解决方案。此外，还不清楚你在问什么。我看到的是“为什么？”这是在一个包含三条语句的项目符号列表之后，然后是一个关于DOM交互基础的单独问题。这似乎是一个需要进行一般性改进的散弹枪问题，而您甚至还没有回顾以前的答案。我提出最后一个问题的原因是，我在阅读的XML DOM教程中没有提到它，但我最近发现了答案，所以不要管它。现在谈谈你的观点：1。正如我提到的，我试过了，但没有成功。我想知道为什么。2.我希望我知道那是什么意思！3.我不明白。。。对不起。我希望我知道那是什么意思！5.好的。按键很重要，所以按下按钮时它会一直移动。关于我的观点：2。我想知道为什么另一个答案，也就是我的事件监听器代码，在使用矩形而不是圆形时不起作用。3.一个让我困惑的奇怪现象。@C如果你不理解我在另一个问题中的答案，那么在这个问题上发表评论。我将在回答这个问题时提供更多细节。@Vertic我猜不出为什么您的代码在使用矩形而不是圆形时不起作用。如果您需要这方面的帮助，请使用不起作用的代码编辑您的问题（而不是对您所做的事情的模糊描述）。@Vertic也许您没有看到代码中包含了哪些需要更改的具体内容，并且为您提供了一个比上面显示的更干净的解决方案。此外，还不清楚你在问什么。我看到的是“为什么？”这是在一个包含三条语句的项目符号列表之后，然后是一个关于DOM交互基础的单独问题。这似乎是一个需要进行一般性改进的散弹枪问题，而您甚至还没有回顾以前的答案。我提出最后一个问题的原因是，我在阅读的XML DOM教程中没有提到它，但我最近发现了答案，所以不要管它。现在谈谈你的观点：1。正如我提到的，我试过了，但没有成功。我想知道为什么。2.我希望我知道那是什么意思！3.我不明白。。。对不起。我希望我知道那是什么意思！5.好的。按键很重要，所以按下按钮时它会一直移动。关于我的观点：2。我想知道为什么另一个答案，也就是我的事件监听器代码，在使用矩形而不是圆形时不起作用。3.一个让我困惑的奇怪现象。@C如果你不理解我在另一个问题中的答案，那么在这个问题上发表评论。我将在回答这个问题时提供更多细节。@Vertic我猜不出为什么您的代码在使用矩形而不是圆形时不起作用。如果你想得到帮助，那么就用不起作用的代码编辑你的问题（不是对你所做的事情的模糊描述）。哇，谢谢！我的代码按您建议的方式更改了，但不起作用，但那一个起作用了！现在来找出原因（当然除了你提到的原因！）。。。无论如何

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="90%" height="90%" version="1.1"
 xmlns="http://www.w3.org/2000/svg">
<style>
    #player { stroke-width:1; stroke:red; fill:red }
</style>
<rect x="250" y="250" id="player" height="50" width="50" />
<script type="text/javascript"><![CDATA[
  var KEY = { w:87, a:65, s:83, d:68 };
  var rect = document.getElementById('player');
  var x = rect.getAttribute('x')*1,
      y = rect.getAttribute('y')*1;
  document.documentElement.addEventListener("keydown", function(evt){
    switch (evt.keyCode){
      case KEY.w: rect.y.baseVal.value = --y; break;
      case KEY.s: rect.y.baseVal.value = ++y; break;
      case KEY.a: rect.x.baseVal.value = --x; break;
      case KEY.d: rect.x.baseVal.value = ++x; break;
    }
  }, false);
]]></script>
</svg>