Home > Web Front-end > CSS Tutorial > How to Create a Clickable Circle with Linked SVG Path Segments?

How to Create a Clickable Circle with Linked SVG Path Segments?

Susan Sarandon
Release: 2024-12-14 19:56:12
Original
556 people have browsed it

How to Create a Clickable Circle with Linked SVG Path Segments?

Creating a Circle with Linked Border Segments

In your quest to replicate the provided circle with clickable orange sides, it becomes evident that using borders alone will not suffice. The solution lies in utilizing SVG paths and trigonometry to generate the coordinates that will define the circle's segments.

Calculating Points on the Circle

To find the coordinates for the segments, we employ trigonometric equations based on the number of segments desired. For instance, to create a circle with six segments, we divide 360 degrees by 6, resulting in 60-degree segments.

From here, the X and Y coordinates of each point can be derived using the following equations:

  • X Coordinate = Radius * Cos(Angle in Radians) Center Point X Coordinate
  • Y Coordinate = Radius * Sin(Angle in Radians) Center Point Y Coordinate

Defining the SVG Path

Once the points are known, we craft the path itself. It should start and end at the circle's center point (50,55) and draw a line to the first point before creating an arc to the next point. Here's an example:

<path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
Copy after login

Creating Links on Segments

To add links to the segments, you can assign a href attribute to each element and add CSS styles to customize their appearance.

Example for a Six-Segment Circle

Here's a demo of a circle with six segments:

<svg viewBox='0 0 110 110'>
  <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' href='link1' />
  <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' href='link2' />
  <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' href='link3' />
  <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' href='link4' />
  <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' href='link5' />
  <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' href='link6' />
</svg>
Copy after login

The above is the detailed content of How to Create a Clickable Circle with Linked SVG Path Segments?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template