0

複数の SVG を簡単に操作できるように、SVG の中心を特定したいと考えています。

基本的なポリゴン (3 ～ 8 辺) の複数の例を作成しようとしていますが、多くの数学を必要とする独自のポリゴンを作成するか、ウィキペディアから現在のものを引き出すことができることにすぐに気付きました。前者の問題は、Sketchup から座標を変換するのに時間がかかることです。後者の問題は、方向が異なり、サイズが異なることです。

SVG を変換、拡大縮小、回転できることは知っていますが、SVG の中心の座標を知る必要があります。普遍的な操作を設定できるように、どうすればこれを見つけることができますか?

これを行うtransform="rotate(degrees x y)"には、センターを知る必要があります。

JS Fiddle ここでは、すべての中心を同じに設定し、それらを同じ高さと幅にスケーリングし、場合によっては個別に回転させて、頂点ではなくすべての底が平らになるようにします。

4

1 に答える 1

0

あなたの質問に対する一般的な答えは明らかではありません...

多角形、特に凸多角形の場合はより簡単かもしれません。パスを反復処理して、パスの各点の x 座標と y 座標の最大値と最小値を計算することで、その境界ボックスを見つけることができます。

次に、形状の中心が境界ボックスの中心であると判断できます。

別の方法として、中心と推定される場所に非表示の要素を配置し (複雑な形状の場合、「中心」の概念は可変である可能性があります)、その座標を取得して中心がどこにあるかを調べることもできます。特に回転目的の場合: 幾何学的中心ではない特定の点を中心にこの回転を実行したい場合があります。

于 2012-12-03T12:05:40.163 に答える