問題:
境界線にリンクされたセグメントを持つ円を作成するには、検索が必要ですSVG パスの座標として機能する円に沿った点
解決策:
円上の点を計算するには、三角方程式が使用されます:
X 座標 = 半径 * Cos(ラジアン単位の角度) ) 中心 X 座標
Y 座標 = 半径 * Sin(ラジアン単位の角度) 中心Y 座標
角度 (ラジアン) = 角度 (度) * Math.PI / 180
例:
6 つのセグメントと半径 50 の円の場合、中心点は(55,55):
Angle Range | Point Coordinates |
---|---|
0-60° | (105,55) |
60-120° | (80,98.30) |
120-180° | (30,98.30) |
180-240° | (5,55) |
240-300° | (30,11.69) |
300-360° | (80,11.69) |
SVG パス:
パスを作成するには、中心点から開始します:
デモ:
以下は 6 つのセグメントを持つ SVG の例ですおよびリンクされた境界線:
<svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> ... (additional paths for each segment) </svg>
以上がリンクされた境界線セグメントを使用して円形の SVG パスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。