6

我正在用 HTML5 开发一个 Web 应用程序，使用 SVG 来绘制路径和文本。在 OS X 上使用 Chrome 进行测试，我遇到了一些非常丑陋的行为，这似乎是 Chrome 中的一个错误。

考虑以下路径穿过的 SVG 文本的最小示例：

<svg height="200" width="200">
    <text x="50" y="50" fill="#000" font-size="50" style="pointer-events: none;">
        <tspan x="5" dy="0">Test Text</tspan>
    </text>
    <path d="M 0 0 L 100 100" stroke="#000" stroke-width="5"></path>
</svg>

( http://jsfiddle.net/wPYvS/ )

我不希望在用光标拖动 SVG 文本时选择（或突出显示）它。所以我添加了 CSS 属性“pointer-events: none”，它在除 Chrome 之外的所有浏览器中都能正常工作。在 Chrome 中，当您仅在文本上拖动时，不会选择任何内容。但是，如果您在路径阻碍的文本上拖动（因此，实际上您是在路径上拖动），则文本会突出显示。

我能够在 Chrome、OS X 和 Windows 中重现这一点，但不能在 Firefox、Opera 或 Safari 中重现。

是否有一些解决方法可以用来完全阻止所有浏览器中的文本选择？

提前致谢！

4

2 回答 2

9

您可以使用 css 伪选择器设置选择突出显示颜色。

svg text::selection { background: none; }

参考这里。

于 2013-08-08T11:31:52.573 回答
3

::selectionbackground使用和设置选择颜色的样式很有用color。虽然::selection { background: none; }工作，但选择仍然启用，但“蒙版”没有背景颜色。

实际禁用选择的正确方法是使用user-select: none.

#div, .class {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
}

参考这里。
您的 JSFiddle已更新。

于 2013-12-05T16:07:06.233 回答