Сделать SVG-текст недоступным

У меня есть svg с некоторым текстом

EDIT: Это все элементы моего 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>

В настоящее время, если я наведите указатель мыши на слово "ТЕКСТ", я могу его выбрать.

Я пытаюсь найти способ сделать его недоступным, используя 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; };

Любые идеи?

Спасибо заранее.

Ответ 1

Вы можете отключить pointer-events, если вам не нужно какое-либо взаимодействие:

Атрибут pointer-events позволяет авторам определять, может ли элемент быть объектом события мыши. Этот атрибут используется, чтобы указать, при каких обстоятельствах (если есть) событие мыши должно пройти "через" элемент и нацелить все, что "под ним", вместо этого.

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

.svgText {
    pointer-events: none;
}