javascript - 在 SVG 中包含 JavaScript

Question

我正在尝试通过将 JavaScript 嵌入到 SVG 中，使用 JavaScript 创建交互式 SVG 代码。我不知道这是否是正确的方法:

<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
onkeypress="move()">
<script type="text/javascript">
    <![CDATA[
    var x;
    var y;
    function move()
    {
        x = new Number(svg.getElementsByTagName("circle")[0].getAttribute("cx"));
        y = new Number (svg.getElementsByTagName("circle")[0].getAttribute("cy"));
        switch (event.keyCode)
        {
            case 119:
            y--;
            y = y.toString();
            svg.getElementsByTagName("circle").setAttribute("cy",y);
            break;
            case 115:
            y++;
            y = y.toString();
            svg.getElementsByTagName("circle").setAttribute("cy",y);
            break;
            case 97:
            x--;
            x = x.toString();
            svg.getElementsByTagName("circle").setAttribute("cx",x);
            break;
            case 100:
            x++;
            x = x.toString();
            svg.getElementsByTagName("circle").setAttribute("cx",x);
            break;
            default:
        }
    }
    ]]>
</script>
<rect x="0" y="0" height="500" width="500" style="stroke-width:1; stroke:black; fill:white"></rect>
<circle cx="250" cy="250" r="50" stroke="red" stroke-width="1" fill="red"></circle>
</svg>

它应该有一个随 wasd 一起移动的球，但球没有移动。我做错了什么？

Answer 1

这是我编写的工作版本:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="250" cy="250" r="50" fill="red" />
  <script type="text/javascript"><![CDATA[
    var KEY = { w:87, a:65, s:83, d:68 };
    var moveSpeed = 5;
    var circle = document.getElementsByTagName("circle")[0];
    var x = circle.getAttribute('cx')*1,
        y = circle.getAttribute('cy')*1;
    document.documentElement.addEventListener('keydown',function(evt){
      switch (evt.keyCode){
        case KEY.w:
          circle.setAttribute('cy',y-=moveSpeed);
          // Alternatively:
          // circle.cy.baseVal.value = (y-=moveSpeed);
        break;
        case KEY.s:
          circle.setAttribute('cy',y+=moveSpeed);
        break;
        case KEY.a:
          circle.setAttribute('cx',x-=moveSpeed);
        break;
        case KEY.d:
          circle.setAttribute('cx',x+=moveSpeed);
        break;
      }
    },false);
  ]]></script>
</svg>

一些注意事项:

1. 不要一次又一次地重新获取对圆的引用。编写您的代码 DRY使其更健壮，更少的打字，并且(在这种情况下)执行速度更快。

   编辑:如果您无法根据上面的代码弄清楚如何执行此操作，请发布任何不适合您的代码。

2. 不要依赖全局 event目的;这是老IE的废话。使用传递给事件处理程序的事件对象。

   编辑:如果您引用event在没有使用该名称的参数或局部变量的代码中，您假设会有一个全局 event对象集。相反，请参阅我为您编写的代码，其中显示事件处理程序传递了 event目的。通过给它一个名字，比如我给它起的名字 evt ，您正在接收特定于您的事件处理程序的事件对象。

3. 由于您正在修改 x和y变量，无需重新获取cx和cy属性每个按键。

   编辑:在您的原始代码和您接受的答案中，您已声明 var x在你的事件处理程序之外，你有 x = ...在事件处理程序的开头，然后 x++在事件处理程序之一中。您可以重新获取 x 的当前值每次(就像你所做的那样)然后 setAttribute(...,x+1) ，或者(正如我所做的那样)您只能在事件处理程序之前获取属性值一次，然后假设每次处理关键事件时该值都是正确的。

4. 不要将 JavaScript 事件处理程序放在元素上，而是以编程方式附加它们。

   编辑:在您的 SVG 标记中，您有: <svg ... onkeypress="move()"> 。在 HTML 中将行为与标记混合是一个非常糟糕的主意，在 SVG 中也是一个坏主意。而不是使用 onfoo="..."属性来描述元素上发生事件时应该发生的情况，而是使用 addEventListner()通过代码附加事件处理程序，无需编辑 SVG 标记。

5. 在将数字设置为属性之前，无需将数字强制转换为字符串。

6. 使用keydown以及我上面提供的 ASCII 事件代码，而不是 keypress如果您希望它在所有浏览器中运行，则可以使用奇数。

   编辑:您在 another post 中投诉您不能执行此操作，因为您希望在按住该键时重复处理事件处理程序。请注意，您想要的行为是通过我在 Chrome、Safari、Firefox 和 IE 中的示例代码实现的(我没有 Opera 来测试)。换句话说keydown无论您认为它应该如何表现，都可以按照您想要的方式工作。

编辑 2:如果您想在文档顶部包含一个脚本 block ，那么在创建所有元素之前，您可以执行如下操作:

<svg ...>
  <script type="text/javascript">
    window.addEventListener('load',function(){
      var circle = ...;
      document.rootElement.addEventListener('keydown',function(evt){
        ...
      },false);
    },false);
  </script>
  ...
</svg>

外部函数仅在页面加载后运行，因此您可以确保存在引用它们的元素。