更多SVG问题(和Javascript)-交互性[移动矩形] [英] More SVG questions (and Javascript) - Interactivity [moving a rectangle]

问题描述

以下代码应在按下键盘上的WASD键时使矩形移动.它不起作用.矩形不会移动，但不会产生任何错误.我该如何进行这项工作?

The following code is supposed to make the rectangle move when pressing the WASD keys on the keyboard. It doesn't work. The rectangle does not move, but no errors are generated. How can I make this work?

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

推荐答案

您的上述代码无效，因为 SVGAnimatedLength 对象，表示可以随时间变化的值.

Your code above does not work because the x and y properties of an SVGRectElement are SVGAnimatedLength objects, representing values that can change over time.

使代码正常工作"的最简单的更改是:

The simplest changes to make your code 'work' are:

1. 更改
   x = new Number(document.getElementById("player").x);
   到
   x = new Number(document.getElementById("player").x.baseVal.value);
   (和y相似).

1. Change
   x = new Number(document.getElementById("player").x);
   to
   x = new Number(document.getElementById("player").x.baseVal.value);
   (and similarly for y).

更改
document.getElementById("player").x=x;
到
document.getElementById("player").x.baseVal.value=x;
(和y相似).

Change
document.getElementById("player").x=x;
to
document.getElementById("player").x.baseVal.value=x;
(and similarly for y).

这将使您的代码按预期工作.但是，通常您可以根据我对先前问题的回答来改进您的代码.

This will cause your code to work as desired. However, your code could generally be improved per my answer to your previous question.

这是我的写法(如果您真的只想一次移动一个单元):

Here is how I would write it (if you really only want to move one unit at a time):

<?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或类似的事件处理程序.

Note that I've moved the <rect> above the <script> block so that a) the user sees the rectangle before the script starts to load, but more importantly b) so that the rectangle exists before calling getElementById(). If your script block occurs before your elements have been defined, you must instead set up your code references in response to an onload or similar event handler.

这篇关于更多SVG问题(和Javascript)-交互性[移动矩形]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！