Question

I use embedded SVG in XHTML and want to create animations from Javascript, but it does not work as expected

I am modeling business processes with XPDL and connect the simulation to a SVG graphics which I animate using javascript. I am doing this in Firefox, and model and graphics are embedded in XHTML. Now the problem is that I want to use an animateMotion-Tag to move an object along a path. Both are already existing, so I tried writing my solution into the SVG file, and this worked fine. It looked like:

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

Of course, the namespaces are set correctly, so this works as expected. I trigger it manually, so there is no begin time needed. Now, my approach for doing the same thing in an existing mixed 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();
}

When I check the dom in firebug, this seems to produce the same node structure with the same attributes, although the href isnt prefixed with xlink:, but setAttributeNS should do this, right? The problem here is that i cannot start the animation with beginElement(). Nothing happens here.

I hope there is help out there, i am really desperate right now.

EDIT:
I found it at last. The problem disappears when I use

setAttributeNS(null,"attr",value)

instead of

setAttributeNS(svgNs,"attr",value)

Correct this if I am wrong, but is not my first approach the way XML was thought? That there shouldn’t be namespaceless attributes? Anyway – SOLVED!

Answer 1

Use

setAttributeNS(null,"attr",value)

instead of

setAttributeNS(svgNs,"attr",value)