当前位置:  开发笔记 > 编程语言 > 正文

使SVG文本无法选择

如何解决《使SVG文本无法选择》经验,为你挑选了2个好方法。

我有一个带有一些文字的svg

编辑:这是我的svg上的所有元素,以实现我需要的效果











TEXT

目前,如果我将鼠标悬停在"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; };

有任何想法吗?

提前致谢.



1> iH8..:

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

pointer-events属性允许作者控制元素是否或何时可能是鼠标事件的目标.此属性用于指定鼠标事件应该在哪个环境(如果有)中"通过"元素,并将该元素的"底层"作为目标.

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

.svgText {
    pointer-events: none;
}



2> Dipesh Raich..:

它对我这样工作:

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

推荐阅读
依然-狠幸福
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有