svg.js と svg.import.js を使用して svg 画像を描画しています。アニメーション機能を使用して、いくつかの要素をアニメーション化しようとしています。既存の変換に変換を追加する方法がわかりません。これは SVG ファイルの私の要素です:
<g id="g5600" style="display:inline;" transform="matrix(0.64633527,-0.76305355,0.76305355,0.64633527,-257.64528,53.75293)">...</g>
たとえば、試してみると:
store.g5600.animate(2000).rotate(45);
結果は次のとおりです。
<g id="g5600" style="display:inline;" transform="rotate(45,155.6640625,382.421875)">...</g>
結果をどこにしたいのか(既存のマトリックス+回転):
<g id="g5600" style="display:inline;" transform="matrix(0.64633527,-0.76305355,0.76305355,0.64633527,-257.64528,53.75293) rotate(45,155.6640625,382.421875)">...</g>
このコードを試してみましたが、うまくいきましたが、これは最善の解決策ではないと思います。
store.g5600.transform('matrix', '0.64633527,-0.76305355,0.76305355,0.64633527,-257.64528,53.75293').animate(2000).rotate(45);
したがって、私の質問は、変換を追加 (または先頭に追加) する方法です。ちなみに、ラファエルでは、これは次を使用して行われると思います。
el.transform("...t50,50");
el.transform("s2...");