0

inkscape（または同様のベクターグラフィックスアプリケーション）で作成された一連のSVGファイルがあります。

編集ツールは、SVG内の要素が画面上を移動するときに、要素に変換を適用します（効率上の理由から、これを行うようです）。これらのツールは、マトリックスに基づいて、ドラッグ、サイズ変更などされる各要素の変換を設定します。

問題は、JavaScript内からSVG内の要素に回転を適用しようとすると、回転の適用によって変換が上書きされることです。これにより、マトリックスが回転に置き換えられるため、単なる回転以上の結果になります。

マトリックスを取得し、希望する回転でマトリックスを更新してから、マトリックスを再適用する必要があると思います。

回転を数分の1度だけインクリメントしようとするときに、これをどのように行うかを誰かが説明できますか（アニメーションの実行による派閥）。

ここでJSFiddleに例を作成しました。何が起こっているのかは明らかではありませんが、私はコードをローカルでテストしました。firebugを介して検査すると、transform属性がrotate（r）に置き換えられていることがわかります。

ところで、私はw3サイトを読んでいて、これしか見つけられませんでした。マトリックスについて詳しく説明していますが、例は示していません。行列を最後に勉強したのは80年代だったので、読みづらいと感じています。行列の乗算を実行し、おそらくcosとsinを使用する必要があるかもしれませんが、私には思えます。アニメーション中にこのようなアプローチを使用した場合のパフォーマンスへの影響がよくわからないため、そうしないことを望んでいます。

ところで、私はすでにSVGから変換を取り除くためのツールを見てきました。ただし、使用したいSVGファイルは別のプロジェクトの一部であるため、これは避けたいと思います。また、私が書いているソフトウェアで使用する独自のSVGを人々に作成させたいので、将来的に問題が発生します。

4

1 に答える 1

1

SVG DOMを使用して、翻訳を上書きするのではなく、追加します。

$('#control1').mousedown(function() {

    if (timer !== null) {
        clearInterval(timer);
        timer = null;
    }

    // change to stop if the current anim is running, and get the current angle
    timer = setInterval(function() {
        angle += 1;

        if (angle >= 360) {
            angle -= 360;
        }

        if (anim.transform.baseVal.numberOfItems < 2) {
          var transform = document.getElementById("arm1").createSVGTransform();
          transform.setRotate(angle, 100, 100);
          anim.transform.baseVal.appendItem(transform);
        } else {
          anim.transform.baseVal.getItem(1).setRotate(angle, 100, 100);
        }
    }, 1);

});
于 2012-09-29T07:56:44.280 に答える