使 SVG 文本不可选

Posted 2023-02-22

【中文标题】使 SVG 文本不可选

【英文标题】：Make SVG Text unselectable

【发布时间】：2016-03-30 10:44:18

【问题描述】：

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

目前，如果我将鼠标悬停在“TEXT”字词上，我可以选择它。

我正在尝试使用 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; ;

有什么想法吗？

提前致谢。

【问题讨论】：

您能在 z 顺序中在其上方放置另一个透明或几乎透明的元素吗？

对我来说很好用 -> jsfiddle.net/adeneo/72LvL8n6

在 Chrome 中添加 -webkit-user-select:none; 的内联样式（到文本元素）对我有用 - 可能还需要 cursor:default;

我编辑了我的代码并包含了 svg 元素。没有一个适用于我所拥有的。

你有 jsfiddle 的例子吗？

【参考方案1】：

如果您不需要任何交互，您可以禁用pointer-events：

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

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

.svgText 
    pointer-events: none;

【讨论】：

谢谢。这对我的代码工作得很好，我需要完成。

我发现这在 android 上不起作用。单击其中带有onclick 的元素后，会出现文本选择指示器和“全选”气球。

这不适用于所有浏览器和设备检查：developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

【参考方案2】：

这样对我有用：

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

【讨论】：

我正在使用 React 并动态创建 SVG 的文本，这是唯一有效的答案（直接使用 style 属性）。