We have code that loads SVG via Ajax and interacts via Javscript. The SVG represents wiring diagrams – that is paths (‘wires’) and text (‘labels for wires’). The paths and text objects are grouped under a node – each node also contains a node: using ID’s we place in the desc node we can respond to the click – e.g. by popping up details of the ;selected wire’.
In general the system works perfectly – but occasionally the SVG click event we get back seems to belong to ‘another wire’. Here is an example of the geomtry when this happens:
---------------
-
-
....... -.....Wire1....
-
-
-
------Wire2--
(I hope this is clear – Wire1 runs horizontal, Wire 2 is a zig zag shape, running vertically as it crosses Wire1)
In this geometry the behaviour we see is:
-
Click on Wire1 Path –> event points at Wire1 Path
Click on Wire1 Text –> event points at Wire2 Path (!Wrong)
Click on Wire2 Path –> event points at Wire2 Path
Click on Wire2 Text –> event points at Wire2 Text
Changing the z order (Writing Wire1 After Wire2 in the SVG file) has no effect.
Representing wires by a series of short paths (rather than one long path) fixes this issue but increases the files size (and these wiring diagrams are massive).
One would like to thing this was just one bug in one SVG browser – but it is observable in Safari 5 and Mozilla. (Which I assume do not share a common code base). Which suggests that under some circumstance SVG defines the ‘active clickable area’ of a Z shaped path to be its bounding rectangle.
How can we control this? Is there a header tag attribute or other work round that would restrict the active area of any path to the path itself?
If you have a fill on your paths (even one the same color as your background) that would clearly explain this. Do you have a test case you can share showing the problem?