2

最終的に、これは Firefox で実行されるキオスク スタイルのアプリ (jQuery 1.6.4 を使用) のためのものであるため、答えは Firefox 固有のものになる可能性があります。

アニメーション化したSVGを作ろうとしているのですが、SMILを動的に挿入してアニメーション化しようとしています。それができないことを示唆するものは何も見たことがなく、http : //srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svgの両方が示しているようですそれができること。

私が理解している問題はbeginElement、動的に挿入されたアニメーションを開始するためにメソッドを呼び出す必要があることですが、どこにも表示されません。

ここに問題を示すフィドルがあります: http://jsfiddle.net/2pvSX/

タイトルの質問への回答に失敗した場合:

  1. 私は何を間違っていますか？
  2. 私がやろうとしていることをよりよく理解するために利用できるリソースはありますか?

これは次の問題ですか。

  1. SVG をどのように定義していますか?
  2. SMIL の作成方法を教えてください。
  3. どのように SVG にアクセスしていますか?
  4. SMIL の挿入方法を教えてください。
  5. まったく別の何か？

最後に、SVG をアニメーション化するより良い方法はありますか?

4

1 に答える 1

4

'http://www.w3.org/2000/svg'このようなアニメーション要素を作成するには、 追加する必要があります

$(document).ready(function () {
    var svg = $('svg').get(0),
    square = svg.getElementById('red'),
    animation = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');
    animation.setAttributeNS(null, 'id', 'walker');
    animation.setAttributeNS(null, 'begin', 'indefinite');
    animation.setAttributeNS(null, 'end', 'indefinite');
    animation.setAttributeNS(null, 'dur', '10s');
    animation.setAttributeNS(null, 'repeatCount', 'indefinite');
    animation.setAttributeNS(null, 'path', 'M 0 0 H 800 Z');
    square.appendChild(animation);
    console.log(animation);
    console.log(typeof animation.beginElement); 
    animation.beginElement();    
});

また、この行を削除し animation = svg.children[1].children[0].children[1];て、アニメーション要素に beginElement 関数
http://jsfiddle.net/2pvSX/1/が含まれるようにします。

于 2013-10-03T17:03:51.117 に答える