Accepted answer

As @ScottCameron notes, the only way to do this is to actually move the nodes around. In general, for a bunch of sibling elements, this is pretty easy to do:

circle.on('mouseover', function() {

You can see a working example here:


add position:absolute; to your circle to make the z-index work


SVG does not have any explicit concept of Z-index. The only way to achieve Z order within an SVG is to move nodes around so the nodes you want on top appear later in the DOM than nodes you want on bottom.

There is talk about adding this for SVG 2 but as far as I know it is still in early development:

Related Query

More Query from same tag