Question

我正在使用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中重现这一点。

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

提前致谢！

Answer 1

您可以使用css伪选择器设置选择高亮颜色。

svg text::selection { background: none; }

参考here。

Answer 2

::selection对于使用background和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+ */
}

参考here。
你的JSFiddle updated。

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

2 个答案: