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个对象，表示可能随时间变化的值。

让代码“正常”的最简单的更改是：

更改
x = new Number(document.getElementById("player").x);
到
x = new Number(document.getElementById("player").x.baseVal.value);
（和y类似）。
更改
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或类似的事件处理程序。

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

1 个答案: