SVG パス セグメントがリンクされたクリック可能な円を作成するにはどうすればよいですか?

リンクされた境界線セグメントを持つ円の作成

クリック可能なオレンジ色の側面を持つ提供された円を複製する探求では、境界線を使用することが明らかになります。それだけでは十分ではありません。解決策は、SVG パスと三角法を利用して、円のセグメントを定義する座標を生成することです。

円上の点を計算する

セグメントの座標を見つけるには、必要なセグメントの数に基づいて三角方程式を使用します。たとえば、6 つのセグメントを持つ円を作成するには、360 度を 6 で割ると、60 度のセグメントが得られます。

ここから、次の方程式を使用して各点の X 座標と Y 座標を導き出すことができます。

X 座標 = 半径 * Cos(ラジアン単位の角度) 中心点 X 座標
• Y座標 = 半径 * Sin(ラジアン単位の角度) 中心点 Y 座標

SVG パスの定義

点がわかったら、パス自体を作成します。円の中心点 (50,55) で開始および終了し、最初の点に線を描いてから、次の点への円弧を作成する必要があります。以下に例を示します。

<path d="M55,55 L105,55 A50,50 0 0,1 80,98.30z"></path>

セグメントにリンクを作成する

セグメントにリンクを追加するには、各 に href 属性を割り当てることができます。要素を追加し、CSS スタイルを追加して外観をカスタマイズします。

6 セグメントの円の例

6 つのセグメントを持つ円のデモを次に示します:

以上がSVG パス セグメントがリンクされたクリック可能な円を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。