使用 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"） 之类的操作时，禁用, the类不会附加到元素中。有没有办法使用 CSS 禁用 SVG 元素？

Answer 1

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

Answer 2

你可以

把css放在svg标签中：

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