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 중국어 웹사이트의 기타 관련 기사를 참조하세요!