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が考えられていた方法である私の最初のアプローチではありませんか？名前のない属性があってはならないということですか？とにかく-解決しました！