SVG パスを使用してクリック可能な円形メニューを作成するには?

境界線にリンクのあるサークルの作成

はじめに

個別のセグメントを持つクリック可能なサークルを作成すると、ユーザー インタラクションが強化されますそして視覚的な魅力。この記事では、SVG パス要素を使用し、三角方程式を適用して座標を計算し、円弧を描くことでこれを実現する方法を検討します。

円上の点の検索

するには円の周囲に均等なセグメントを作成するには、その円周に沿った特定の点の座標を計算する必要があります。これは、三角方程式を使用して実行できます。

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

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

ラジアン単位の角度 = (度単位の角度 * Math.PI / 180)

SVG パスの構築

ポイントが計算されたら、それらを接続する SVG パスを定義できます。パスは中心点で開始し終了し、始点までは線を描き、終点までは円弧を描く必要があります。

たとえば、6 つのセグメントを持つ円のパスを作成するには、次を使用します。

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

ここで、55,55 は中心点を表し、円弧の形状は半径 (50)、スイープ度 (0)、および回転角度を使用して定義されます。 (1).

6 つのセグメントを持つ円のデモ

このサンプル SVG は、それぞれが異なるエンドポイントにリンクされている 6 つのセグメントを持つ円を示しています。

以上がSVG パスを使用してクリック可能な円形メニューを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。