web-dev-qa-db-ja.com

SVGテキストを選択不可にする

テキストを含む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>

現在、「テキスト」という単語の上にマウスを置くと、それを選択できます。

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

何か案は？

前もって感謝します。

javascriptjquerycsssvg
21
JustQn4

pointer-eventsインタラクションが必要ない場合：

Pointer-events属性を使用すると、作成者は、要素がマウスイベントのターゲットになるかどうか、またはいつになるかを制御できます。この属性を使用して、マウスイベントが要素を「通過」し、代わりにその要素の「下」にあるものをターゲットにする必要がある状況（存在する場合）を指定します。

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

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

それはこのように私のために働きます：

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);
6
Dipesh Raichana