javascript - 使用 XHTML 中嵌入的 SVG 从 Javascript 创建动画

Question

我在 XHTML 中使用嵌入式 SVG，并希望从 Javascript 创建动画，但它无法按预期工作

我正在使用 XPDL 对业务流程进行建模，并将模拟连接到我使用 JavaScript 制作动画的 SVG 图形。我在 Firefox 中执行此操作，模型和图形嵌入在 XHTML 中。现在的问题是我想使用 animateMotion-Tag 沿路径移动对象。两者都已经存在，所以我尝试将我的解决方案写入 SVG 文件，效果很好。它看起来像:

<animateMotion xlink:href="#id1" rotate="auto" dur="2s">
    <mpath xlink:href="#id2">
</animateMotion>

当然，命名空间设置正确，因此这可以按预期工作。我手动触发它，所以不需要开始时间。现在，我在现有的混合 XHTML/SVG-dom 中执行相同操作的方法:

function moveAlongPath(elemId,pathId,rotate,duration)
{
  var svgNs = "http://www.w3.org/2000/svg";
  var xlinkNs = "http://www.w3.org/1999/xlink";
  var motionElem = document.createElementNS(svgNs,"animateMotion");
  motionElem.setAttributeNS(xlinkNs,"href","#" + elemId);
  motionElem.setAttributeNS(svgNs,"rotate",rotate);
  motionElem.setAttributeNS(svgNs,"dur",duration + "ms");
  var pathRef = document.createElementNS(svgNs,"mpath");
  pathRef.setAttributeNS(xlinkNs,"href","#" + pathId);
  motionElem.appendChild(pathRef);
  var animElem = svgRootNode.getElementById(elemId); // It is indeed the <svg>-Node
  animElem.appendChild(motionElem);
  // Setting x and y to 0 is important for the Element to be "on" the Path
  animElem.setAttribute("x",0);
  animElem.setAttribute("y",0);
  motionElem.beginElement();
}

当我在 firebug 中检查 dom 时，这似乎会产生具有相同属性的相同节点结构，尽管 href 没有以 xlink: 为前缀，但 setAttributeNS 应该这样做，对吗？这里的问题是我无法使用 beginElement() 启动动画。这里什么也没发生。

希望大家能帮忙，我现在真的很绝望。

编辑: 我终于找到了。当我使用时问题就消失了

setAttributeNS(null,"attr",value)

而不是

setAttributeNS(svgNs,"attr",value)

如果我错了，请更正，但我的第一种方法不是 XML 的思考方式吗？不应该有无 namespace 的属性吗？无论如何 - 解决了!

Answer 1

使用

setAttributeNS(null,"attr",value)

而不是

setAttributeNS(svgNs,"attr",value)