creating a Grid layer on SVG canvas

Question

All,

We could really do with some advice from SVG gurus.

WHAT WE HAVE: There is a SVG canvas on which we have co-ordinates mapped (X & Y axis position of the cursor). When the user moves the cursor on the SVG canvas the co-ordinates are shown in real time on the top left of the webpage.

WHAT WE WANT: We want to add a grid layer on top of the SVG canvas layer (on which the mouse co-ordinates are mapped) so that the grid layer always stays on top, no matter what the user does with the base layer. We also want the co-ordinates to continue to show even though the grid layer is on top now.

WHAT THE PROBLEM IS: When we add a SVG grid layer on top of the existing layer, the mouse co-ordinates stop working (understandably, as they are based on the SVG layer thats hidden by the grid layer now). Also as the user will interact with the base layer (they can only show/ hide the grid layer), we want them to continue to do all the things we want them to do with the base layer inspite of the grid on top.

To put it simply: We want the photoshop grid kind of functionality on our SVG canvas.

Any advice would be awesome help.

Answer 1

Sounds like you want to add pointer-events="none" to the grid layer. That will make the mouse events pass through the grid layer even if it's on top, and even if it's not transparent. See here for more details.