Question

I have a number of transparent overlapping ellipses (as shown below).

I highlight each ellipse on mouseover, but it is impossible to highlight many ellipses because other ellipses have been drawn over them.

From my limited knowledge of svg, there are three solutions:

• Find some way to only detect mouseovers on the edges of each ellipse.
• Draw the ellipses using bezier curves.
• Reorder the drawing of ellipses. I am not sure how to do this, or if it is even possible to solve it this way given all these shapes.

Any help is much appreciated!

Answer 1

Target areas in svg are only whatever is painted on-screen. So, in theory, your ellipses should be hoverable only on their strokes. If this is not the case then you might be setting your fill with something else than none (perhaps rgba(0,0,0,0) ?).

You might also also be setting the hover on the g element instead of the ellipse.

You can see an example here: http://jsfiddle.net/r65E9/

ellipse {
  stroke: #fff;
  stroke-width: 1;
  fill: none;
}

ellipse:hover {
  stroke: #f66;
}