SVG 文本选择在 Chrome 中不起作用吗？答案

【问题标题】：Is SVG text selection not working in Chrome?SVG 文本选择在 Chrome 中不起作用吗？
【发布时间】：2019-06-12 20:27:32
【问题描述】：

由于某种原因，我无法在 Chrome 中选择 SVG 元素的文本选择。

我最初是从一个已转换为 SVG 的 PDF 文件开始的，但当它不起作用时，我认为这可能是 SVG 文件中的所有额外数据。因此，我使用了非常简单的 SVG 示例，如下面的示例，但 Chrome 显然仍然无法正确选择文本。它在其他浏览器中运行良好。

<!DOCTYPE html>
<html>
<body>

<svg height="90" width="400">
    <text x="10" y="20" style="fill:red;">Several lines for testing:
        <tspan x="10" y="45">This is a sentance on the first line.</tspan>
        <tspan x="10" y="70">Testing a second line as well with text selection</tspan>
    </text>
</svg>

</body>
</html>

这在其他浏览器中运行良好，没有任何问题。我可以单独或完全选择每一行而不会出现问题。是我做错了什么还是 Chrome 中的错误？

我需要能够在 HTML 页面中显示转换后的 SVG 内容，并允许用户在需要时选择文本。

【问题讨论】：

您可能会发现这支笔很有用：::selection and SVG text
此修复无法解决问题，因为文本周围的高亮框仍然损坏。我不是在突出显示时尝试更改文本颜色，而是解决光标文本选择框/矩形无法正常工作的问题。
恐怕你不能。在链接的笔中，您可以看到 .s::selection 具有 background-color: indigo;在 SVG 中，您只能对 <svg> 根元素使用背景属性。您不能对文本使用背景属性。我想 chrome 是唯一正确的浏览器。

标签： html google-chrome svg

【解决方案1】：

在进行更多挖掘后，发现这是 70.0.3538.67 中报告的 Chrome 回归问题。

https://bugs.chromium.org/p/chromium/issues/detail?id=897752#c27

根据将在 Chrome 72（2019 年 2 月稳定）中修复的错误。

【讨论】：