問題:
建立一個有連結邊框線段的圓形連結需要找出沿圓作為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中文網其他相關文章!