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

create animations from Javascript using embedded SVG in XHTML

本文关键字：Javascript 创建 动画 SVG 嵌入式 XHTML 使用      更新时间：2023-09-26

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

我

正在使用XPDL对业务流程进行建模，并将模拟连接到SVG图形，我使用javascript对其进行动画处理。我在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 的想法吗？不应该有无命名空间的属性吗？无论如何 - 解决了！

使用

setAttributeNS(null,"attr",value)

而不是

setAttributeNS(svgNs,"attr",value)

variableElementNS.href.baseVal = value;
相关文章：