Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG Marker onHover Event (Graph)

Tags:

svg

I am building my own line graph and wanted to know how would I go about making a <path> line interactive on hover.

For example (simplified):

<path d="M5,10L10,20L30,40"></path>

How would I execute a hover event when the user hovers over 5,10 or 10,20 and show a <circle> or just a command in general? Is there something I'm missing or do I have to detect the mouse's position?

like image 622
John Smith Avatar asked Sep 26 '13 04:09

John Smith


1 Answers

SVG has a concept called markers that allow arbitrary shapes to be added to path nodes but markers cannot receive events, per the last line in the SVG marker specification text.

Event attributes and event listeners attached to the contents of a ‘marker’ element are not processed; only the rendering aspects of ‘marker’ elements are processed.

If you think this should change, take it up with the w3c SVG group.

If you want to respond to events you'd have to manually create your own shapes and ensure that they happen to be situated at the correct points.

like image 149
Robert Longson Avatar answered Nov 09 '22 11:11

Robert Longson