JavaScript を使用して SVG ドキュメント内の特定の要素のサイズを変更したり、回転したりする必要があります。問題は、デフォルトでは、常に(0, 0)左上の原点を中心に変換が適用されることにあります。
この変換アンカー ポイントを再定義するにはどうすればよいですか?
属性を使用してみましたtransform-originが、何も影響がありません。
私がやった方法は次の通りです:
svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');
Firefox では属性が正しく設定されていることがわかりますが、指定したポイントにピボット ポイントが設定されていないようです。括弧付きcenter bottomと50% 100%括弧なしなどの操作を試しました。これまでのところ、何も機能していません。
誰か助けてくれませんか？
ベストアンサー1
回転するには を使用します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 軸のスケーリング係数です。