Question

我有一个像这样的HTML页面

＆＃13;

<button onclick='alert(document.getSelection().toString())'>Get Selection</button>

Test SVG:<br>
<svg height="30" width="500">
  <text x="0" y="15">This is the sentense</text>
  <text x="130" y="15">written in one</text>
  <text x="225" y="15">line in the browser</text>
    
  <text x="0" y="30">Another line of text</text>
  <text x="130" y="30">which is rendered</text>
  <text x="250" y="30">as SVG text html 5</text>
    
</svg>

＆＃13;

此页面在Chrome中看起来像这样（我对其他任何浏览器都不感兴趣）。我的任务：点击用户选择的按钮获取文字。

如果我选择此处显示的文字

此标准javascript代码document.getSelection().toString()

返回此文

sentense
written in one
line in the browser
Another line of text
which

我无法识别真正的新行字符在哪里以及来自<text>标记的字符在哪里。使用带有标签的普通html，p，div，span，此代码document.getSelection().toString()可以正常工作，但不能使用svg和text。

如果我把这样的文字标签放在像

这样的标签中

<text x="0" y="15">This is the sentense</text><text x="130" y="15">written in one</text><text x="225" y="15">line in the browser</text>

结果是一样的。

我的问题：如何选择看起来像这样的文本

sentense written in one line in the browser
Another line of text which

?? 最好使用一些标准的svg javascript代码，如此处记录https://developer.mozilla.org/en-US/docs/Web/API/SVGAElement。实际上我找不到关于这个SVG事物的javascript API的好文档。

您可能想知道，为什么我使用多个文本标签来表示一行，为什么不只是一个文本标签。我无法改变它，因为这个带有所有svg和文本标签的html代码来自外部库（OpenText Brava Viewer）。我必须与OpenText Brava Viewer集成，标准API没有此功能。

我已经制作了一些算法，在这里我获得了第一个选定的文本标签，最后一个文本标签，按x，y坐标对其进行排序并获得一些选定的文本，但它始终不起作用。有时这个Brava查看器生成如此复杂的HTML代码，我无法真正得到这个文本。

更新：

根据SVG specification文字标记看起来与文字的顺序相同。如果我假设这个，我可以通过在选择的开始和结束之间获取所有文本标签来获取文本并连接所有字符串并在当前文本标记的y坐标不等于前一个标记的y坐标时添加新行（\ n）。我还没有实现它，并且当我完成测试时将把更新放在这里。

Answer 1

我看到你在这里尝试做什么，但遗憾的是当你在一行中使用多个文本标签时，没有内置的方法让javascript看到换行符的位置。

然而，正如你所看到的那样。 samle线上的所有文本元素都具有相同的Y坐标。所以你可以做的是尝试创建一个函数，根据对应Y坐标的文本标签对行中文本的大量进行排序。

然而，这听起来有点像挑战。

如何从SVG <text>标签中获取所选文本

1 个答案: