HTML5 – Chrome中的SVG文本选择错误？

我正在使用SVG在 HTML5中开发Web应用程序来绘制路径和文本.在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文本时选择(或突出显示)SVG文本.所以我添加了CSS属性“pointer-events：none”,它在除Chrome之外的所有浏览器中都能正常工作.在Chrome中,当您仅拖动文本时,不会选择任何内容.但是如果要拖动路径阻碍的文本(实际上是在路径上拖动),文本会突出显示.

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

我可以使用一些解决方法来阻止所有浏览器中的文本选择吗？

提前致谢！

解决方法

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

svg text::selection { background: none; }

参考here.

原文地址：https://www.jb51.cc/html5/240984.html