web-dev-qa-db-fra.com

Rendre le texte SVG non sélectionnable

J'ai un svg avec du texte

EDIT: c'est tous les éléments sur mon svg afin d'accomplir l'effet dont j'ai besoin

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

Actuellement, si je passe la souris sur le mot "TEXTE", je peux le sélectionner.

J'essaie de trouver un moyen de le rendre non sélectionnable, en utilisant CSS, JQuery (comme suit) mais rien ne semble fonctionner. Je n'ai rien trouvé de semblable non plus.

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

Des idées?

Merci d'avance.

javascriptjquerycsssvg
21
JustQn4

Vous pouvez désactiver pointer-events si vous n'avez besoin d'aucune interaction:

L'attribut pointer-events permet aux auteurs de contrôler si ou quand un élément peut être la cible d'un événement de souris. Cet attribut est utilisé pour spécifier dans quelles circonstances (le cas échéant) un événement de souris doit passer "à travers" un élément et cibler à la place tout ce qui est "en dessous" de cet élément.

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

.svgText {
    pointer-events: none;
}
23
iH8

Cela fonctionne pour moi de cette façon:

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

Si vous rencontrez toujours des problèmes avec les appareils tactiles que vous pourriez utiliser (ce n'est qu'une astuce):

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