ホームページ > ウェブフロントエンド > CSSチュートリアル > リンクされた境界線セグメントを使用して円形の SVG パスを作成するにはどうすればよいですか?

リンクされた境界線セグメントを使用して円形の SVG パスを作成するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-16 18:13:11
オリジナル
964 人が閲覧しました

How to Create a Circular SVG Path Using Linked Border Segments?

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

問題:

境界線にリンクされたセグメントを持つ円を作成するには、検索が必要です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 パス:

パスを作成するには、中心点から開始します:

  • 中心点 (55,55) から開始します。
  • 「始点」まで線を描きます。 「点」 (例: (105,55))。
  • 「終点」まで円弧を描きます (例: (80,98.30))。

デモ:

以下は 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート