Type 2 - Floating Selection

• On mouseover, the object under the cursor becomes eligible for selection, represented by a green border.
• Mousewheel up will "select" this object, represented by a blue border.
• This will expose any objects below the selected object to the mouseover event.
• Mousewheel down "deselects" the current selection and restores the previous selection (if one exists).
• The mouse can be moved without breaking the selection (hence it is "floating")
• This implementation also makes selected and previously selected objects semi-transparent. Thus the objects below become visible not only to mouse events, but also to the user's eyes.

Key Implementation Details

1. We define selected and deselected classes with pointer-events:none set.
2. On mouseover, the mouseover class is added to that object. This is removed on mouseout.
3. On a mousewheel up, any currently selected objects have their class changed from selected to deselected. We then select the object with the mouseover class and change it to be selected.
4. We also assign a sdepthN class (e.g. sdepth1, sdepth2, ...) as objects are deselected, so we can navigate back to these in the correct order later.
5. Mousewheel down reverses the process.

The implementation is very simple and requires no special features on the SVG itself, theoretically making it possible to apply this method to any random SVG image.

All mousewheel events occuring when the mouse is inside the SVG are captured and default action (i.e. scrolling) is prevented. This is by intent, but the code can be adjusted so that scrolling is not prevented under some conditions, should that be desired.