Search code examples
javascriptjquerycsssvgpointer-events

Setting pointer-events on an SVG-path using Javascript

I am using a JavaScript-function to enable and disable pointer-events on a click. The <svg> is a child of a child of the <main>-element.

My first try was:

let el = jQuery( "main" );
el.css({ "pointer-events": "none" });

This should work because the pointer-events property is inherited. And it does. Pointer-events are disabled on all elements except on the path in my svg. Then, after googling for a while, I found out that pointer-events in svg is an element's attribute.

So I tried:

let el = jQuery( "main" );
console.log( el.find( "path" ).attr( "pointer-events" ) ); // which returns: undefined

el.css({ "pointer-events": "none" });
el.find( "path" ).attr( "pointer-events", "none" );
console.log( el.find( "path" ).attr( "pointer-events" ) ); // which returns: none

So the attribute gets set, but it isn't working. The path still responds to hover- and to click-events.

Now i am stuck because I don't understand this.

Solution

  • This was quite a silly question. Because of a mistake elsewhere in the code it did not work.

    Though apparently the svg does not inherit the pointer-events-property. But el.find( "path" ).css( "pointer-events": "none" ); works perfectly.

    @Turnip is quite right in his comment. If you really need help you want to post all the relevant code.

    I hope this will help somebody in the future.