Make SVG Text unselectable

Question

I have a svg with some text

EDIT: This is all the elements on my svg in order to accomplish the effect I need

<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> 

Currently if I hover the mouse over the "TEXT" word I am able to select it.

I am trying to find a way to make it not to be selectable, using CSS, JQuery (as follows) but nothing seems to work. I could not find anything similar either.

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; }; 

Any ideas?

Thanks in advance.

Answer 1

You could disable pointer-events if you don't need any interaction:

The pointer-events attribute allows authors to control whether or when an element may be the target of a mouse event. This attribute is used to specify under which circumstance (if any) a mouse event should go "through" an element and target whatever is "underneath" that element instead.

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

.svgText {     pointer-events: none; }