Question

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

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

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

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

我正试图找到一种方法，使其不能被选择，使用CSS，JQuery（如下），但似乎没有任何作用。我找不到任何类似的东西。

CSS

$('#txt text').onmousedown = function() { return false; };

JQUERY

                dynamic document = (JSObject)webControl1.ExecuteJavascriptWithResult("document.getElementsByClassName(\"badge\")[1]");
                string gg = document.innerText;
                personcount = Convert.ToInt16(gg);

                int odd = rnd.Next(1, personcount * 2);
                for (int i = 0;odd % 2 == 0;i++)
                {
                    odd = rnd.Next(1, personcount * 2);
                }
                dynamic document2 = (JSObject)webControl1.ExecuteJavascriptWithResult("document.getElementsByClassName('name')["+odd+"]");
                using (document2)
                {
                    if (document2.HasMethod("click"))
                    {
                        document2.Invoke("click");
                        stepcount = 2;
                    }
                }

有什么想法吗？

提前致谢。

Answer 1

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

pointer-events属性允许作者控制元素是否或何时可能是鼠标事件的目标。此属性用于指定鼠标事件应在哪个环境（如果有）中“通过”一个元素，并指定该元素“在”下面的任何内容。

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

.svgText {
    pointer-events: none;
}

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

使SVG文本无法选择

2 个答案: