Fatal编程技术网

Javascript 使SVG文本不可选择

javascript jquery css svg

Javascript 使SVG文本不可选择,javascript,jquery,css,svg,Javascript,Jquery,Css,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

我有一个带有一些文本的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>
JQUERY

$('#txt text').onmousedown = function() { return false; };
有什么想法吗

提前感谢。

如果不需要任何交互，您可以禁用
指针事件：

指针事件属性允许作者控制元素是否或何时可能是鼠标事件的目标。此属性用于指定在何种情况下（如果有），鼠标事件应该“穿过”元素，并以该元素“下面”的任何内容为目标




对我来说是这样的：


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


如果您仍然面临触摸设备的问题，您可以使用（这只是一个技巧）：


你能把另一个透明的或非常接近透明的元素按z顺序放在它上面吗？对我来说很好->添加
-webkit user select:none的内联样式（到文本元素）
在Chrome中适用于我-可能还需要一个
光标：默认值我编辑了我的代码并包含了svg元素。没有一个能像我所拥有的那样工作。你们有关于JSFIDLE的例子吗？谢谢。这在我的代码中运行得很好，我需要完成。我发现这在android上不起作用。单击带有
onclick
的元素后，将显示文本选择指示器并显示“全选”气球。这不适用于所有浏览器和设备检查：我正在使用React动态创建SVG文本，这是唯一有效的答案（直接使用style属性）。

.svgText {
    pointer-events: none;
}



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