使SVG文本無法選擇

Question

我有一個帶有一些文字的svg

編輯：這是我的svg上的所有元素，以實現我需要的效果

<g id="top">
<path ....>
</g>
<g id="bottom">
<path ....>
</g>
<g id="boxes">
<rect ....>
</g>
<g id="txt">
<text transform="matrix(1 0 0 1 50 30)" class="svgtxt">TEXT</text>
</g>

目前，如果我將鼠標懸停在“TEXT”字上，我可以選擇它。

我試圖找到一種方法，使其不能被選擇，使用CSS，JQuery（如下），但似乎沒有任何工作。 我也找不到類似的東西。

CSS

.svgtxt{
  -webkit-touch-callout: none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
}

JQUERY

$('#txt text').onmousedown = function() { return false; };

有任何想法嗎？

提前致謝。

Answer 1

如果您不需要任何交互，可以禁用pointer-events ：

pointer-events屬性允許作者控制元素是否或何時可能是鼠標事件的目標。 此屬性用於指定鼠標事件應該在哪個環境（如果有）中“通過”元素，並將該元素的“底層”作為目標。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

.svgText {
    pointer-events: none;
}

Answer 2

它對我有用：

svg text{
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

如果你仍然可以使用觸摸設備的問題（這只是一個技巧）：

  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);