CODEWITHSUNDEEP
javascriptjquerycsssvg
JustQn4
JustQn4

Reputation: 459

Make SVG Text unselectable

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.

Upvotes: 39

Views: 25746

Answers (2)

Dipesh Raichana
Dipesh Raichana

Reputation: 1068

It works for me this way:

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

If you still face problem in touch devices you could use(this is just a trick):

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

Upvotes: 41

iH8
iH8

Reputation: 28638

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

Upvotes: 47

Related Questions