Tomer Hadad Tomer Hadad - 2 months ago 8
HTML Question

Can an HTML element be both displayed and ignored?

I am trying to draw SVG lines over HTML elements, while:
1. The lines should be above the elements.
2. The elements should be clickable and selectable, meaning, the SVG does not cover the elements in terms of being able to click or select them.

As the z-index of lines cannot be configured separately from the z-index of the SVG (from what I know), the only way I thought about is to give the SVG a high z-index but set it to be ignored in terms of disrupting the elements beneath.

Is this possible?
Any other ideas how to implement the lines over elements without disrupting the ability to click and select them?

Thanks

Answer

You can add following css to SVG lines.

pointer-events: none;