[解決済み] SVGでtransformの原点を設定する方法

質問

javascriptを使用してSVGドキュメントの特定の要素のサイズを変更したり、回転させたりする必要があります。問題は、デフォルトで、それは常にで原点を中心に変換を適用することです。 (0, 0) - の左上を原点とした変換を適用することです。

このトランスフォームアンカーポイントを再定義するにはどうしたらよいでしょうか。

私は transform-origin 属性を使ってみましたが、何の影響もありません。

このようにしました。

svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');

Firefoxで見ると属性は正しく設定されているのですが、私が指定したポイントにピボットポイントが設定されていないようです。次のようなことを試してみました。 center bottom と 50% 100% を括弧付きと括弧無しで表示します。今のところ何も動作していません。

どなたか助けてください。

どのように解決するのですか？

回転させるには transform="rotate(deg, cx, cy)" ここで、degは回転させたい度数、(cx, cy)は回転の中心を表します。

拡大・縮小のためには、(-cx, -cy)で平行移動し、拡大・縮小してから(cx, cy)に平行移動しなければなりません。これを行うには 行列変換 :

transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"

ここで、sxはx軸のスケーリングファクター、syはy軸のスケーリングファクターです。