Disable SVG mouseclick event using CSS

Question

I want to disable clicking on an SVG element using css:

.disabled{
  pointer-events: none;
}

When I get the SVG element using $(".dasvg"), the console shows that I have selected the element:

[
  <svg width=​"500" height=​"500" class=​"dasvg">​
  <defs>​…​</defs>​
  <defs>​…​</defs>​
  <path class=​"link dragline hidden" d=​"M0,0L0,0">​</path>​
  <g>​…​</g>​
  <g>​…​</g>​
  </svg>​
]

However, when I try to do something like $(".dasvg").addClass("disabled") or $(".dasvg")[0].addClass("disabled"), thedisabled` class does not get appended to the element. Is there a way to disable SVG elements using CSS?

Answer 1

jquery's addClass doesn't work with SVG classes as jquery can't cope with SVG class attributes being animatable. Just use $(".dasvg")[0].setAttribute("class", "disabled") assuming that the element doesn't have any classses already.

Answer 2

You may put css inside svg tag:

<svg>​
    <!-- Insert here​ -->
    <style>
        .disabled {
            pointer-events: none;
        }
    <style>
    <!-- The rest of the code -->
</svg>​