Question

Using the example from “How to achieve donut holes with paths in raphael” ( How to achieve 'donut holes' with paths in Raphael ) I was able to tweek the code a bit more to my use-case.

My next goal with this is to enlarge one of the sectors on mouse over, without pulling it away from the inside circle. Is this possible?

Here’s the current code: http://jsfiddle.net/Swivelgames/efb9n/1/

I’m hoping to make it look like this:

Answer 1

Evening,

I’ve sort of cheated here. The way the donut is working right now is by using scaling, but to do what you want you can’t go that way. The options are to recalculate the sector, or to cheat. I’ve done both.

I’ve added a second donut with bigger sectors, which I’ve then hidden. On the original donut, the mouseover hides the appropriate sector and displays the sector from the bigger ring.

The outer ring has a mouseout function which reverses the process.

Heres a fiddle that hopefully shows it working.

It’s not the optimal solution, but it might help you along.