円に使用するSVG画像の領域を計算する方法

Question

SVG画像のサイズは200px x 300pxですが、いくつかの条件に基づいて、半径値が30の小さな円を描く必要があります条件が失敗し、画像の指定された領域に均等にレイヤーを重ねる（オーバーラップさせない）ようにします。

複数の円が描かれている可能性がありますが、画像の最初の行に5つの円が既に描画されている場合は、次の線に折り返されることはありません。

同じことが行2に適用され、半径30の5つの円が描画され、次の行に折り返されます。

私はsnapsvg.ioを使用していますが、画像の領域を計算する方法がわかりません。ここで円を描画し、次の行に折り返しを行う方法がわかりません。

どのように上記を達成するための任意の助けが大歓迎です。

ありがとうございました。

Answer 1

目標としたい領域の境界を計算し、Robert Longsonの提案するようにjavascriptのモジュロ演算子を使用してこれを達成する方法を工夫しました。

境界線を使用して、使用したい画像領域の各コーナー位置を手動で決定しました。左から右に下から左に - 基本的に幅/高さです。

これに加えて、私はこの画像領域の左から右に7つの小さな円を表示することしか知りませんでした。したがって、ループインデックス％7 = 0のとき、次に（x、y）イン - 2r。