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")ただし、 or $(".dasvg")[0].addClass("disabled") disabled` クラスのようなことをしようとする, theと、要素に追加されません。CSS を使用して SVG 要素を無効にする方法はありますか?

Answer 1

jquery はアニメーション可能な SVG クラス属性に対応できないため、jquery の addClass は 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>​