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

Question

下面的代码应该在按下键盘上的 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>

Answer 1

您上面的代码不起作用，因为x and y properties of an SVGRectElement 是SVGAnimatedLength 对象，表示可以随时间变化的值。

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

1. 更改
   x = new Number(document.getElementById("player").x);
   到
   x = new Number(document.getElementById("player").x.baseVal.value);
   （对于 y 也是如此）。

2. 更改
   document.getElementById("player").x=x;
   到
   document.getElementById("player").x.baseVal.value=x;
   （对于 y 也是如此）。

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

我会这样写（如果你真的只想一次移动一个单元）：

<?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>

请注意，我已将<rect> 上方移至<script> 块，以便a）用户在脚本开始加载之前看到矩形，但更重要的是b）以便矩形在调用getElementById() 之前存在。如果您的脚本块在定义元素之前出现，则必须改为设置代码引用以响应 onload 或类似的事件处理程序。