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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With