1

我在 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 被认为的方式吗？不应该有无命名空间的属性吗？无论如何 - 解决了！

4

2 回答 2

0

采用

setAttributeNS(null,"attr",value)

代替

setAttributeNS(svgNs,"attr",value)
于 2012-06-14T18:58:54.370 回答
0 
variableElementNS.href.baseVal = value;
于 2014-02-12T11:41:23.547 回答