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

Question

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

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

提前致谢!

Answer 1

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

svg text::selection { background: none; }

引用 here .