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

Question

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

.disabled{
  pointer-events: none;
}

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

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

但是，当我尝试执行类似$(".dasvg").addClass("disabled")或 $(".dasvg")[0].addClass("disabled") , thedisabled` 类的操作时，不会将其附加到元素上。有没有办法使用 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>​