I have a circular image similar to this (pls ignore numbers, this is just an example):
And each “segment” is a different color with some text in it, and a
slight gradient coming off the outer edge (like an outer glow).
We are currently using an image map so each segment can be clicked on,
however I’d like to break the image up as I want to add hover states and
I feel it’s both a good exercise, a lighter file and good practice.
I think I’d like to “draw” each segment as a css somehow (svg?) so I can
easily add hover state colors. I think I;d like to avoid using
background images, but I am open to advice.
I feel getting the perfect segmentation will be a challenge. And I guess
I’d need to use some absolute positioning to get the components working
(with a relative parent?)
Here is a very rough draft:
.circle {
position :relative;
}
.segment 1 {
position: absolute;
X cords???
y cords???
}
Rather than placing the segs with css, i would probably just draw this in Illustrator (or similar) and save to SVG.
The svg code would need to be copied into the html, so it’s in-line, that way css can be applied to it. You can make it a php include for neater html. But when the svg is in-line, you can add classes to the paths that make each segment. Then you can target those classes with css to colour them as you wish.
Thank you, this is 100% the best approach. For this task, I also need to ensure the resulting object is accessible, and an SVG is the best option for this (as it;s readable by the DOM).
Combined with the code generator that Chris posted, you guys have really helped me a lot.
