[英]Make SVG Text unselectable
我有一个带有一些文字的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; };
有任何想法吗?
提前致谢。
如果您不需要任何交互,可以禁用pointer-events
:
pointer-events属性允许作者控制元素是否或何时可能是鼠标事件的目标。 此属性用于指定鼠标事件应该在哪个环境(如果有)中“通过”元素,并将该元素的“底层”作为目标。
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events
.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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.