使用 CSS 禁用 SVG 鼠标点击事件

Question

我想禁止点击使用 css 的 SVG 元素：

.disabled{
  pointer-events: none;
}

当我使用$(".dasvg") 获取 SVG 元素时，控制台显示我已选择该元素：

[
  <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>​
]

但是，当我尝试执行 $(".dasvg").addClass("disabled") 或 $(".dasvg")[0].addClass("disabled"), thedisabled 之类的操作时，类不会附加到元素上。有没有办法使用 CSS 禁用 SVG 元素？

Answer 1

你可以把css放在svg标签里面：

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

Answer 2

jquery 的 addClass 不适用于 SVG 类，因为 jquery 无法处理可动画化的 SVG 类属性。假设元素还没有任何类，只需使用$(".dasvg")[0].setAttribute("class", "disabled")。