CODEWITHSUNDEEP
javascripthtmlsvg
Zlelik
Zlelik

Reputation: 570

How to get selected text from SVG <text> tags

I have an html page like this

<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>

This page looks like this in Chrome (I am not interested in any other browser). enter image description here my task: By click on the button get text selected by the user.

If I select text like shown here

enter image description here

this standard javascript code document.getSelection().toString()

return this text

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

and I cannot recognize where is the real new line character and where is one which came from <text> tag. With normal html with tags, p, div, span this code document.getSelection().toString() works fine, but not with svg and text.

If I put text tags like this in one like

<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>

the result is the same.

My question: how to get selected text which will look like this

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

?? Preferably with some standard svg javascript code, like documented here https://developer.mozilla.org/en-US/docs/Web/API/SVGAElement. Actually I could not find a good documentation about javascript API for this SVG things.

You may be wondered, why I am using many text tag to represent one line, why not just 1 text tag. I cannot change it because this html code with all those svg and text tags come from an external library (OpenText Brava Viewer). I have to make an integration with that OpenText Brava Viewer and standard API does not have this function.

I already make some algorithm, where I get first selected text tag, last text tag, sort it by x, y coordinates and get some selected text, but it does not work always. Sometimes this Brava viewer produce so complicated html code, that I cannot really get this text.

UPDATE:

Looks like that according to SVG specification text tags should go in the same order as text. If I assume this, I can get text by getting all text tags between start and end of selection and concatenate all strings and add a new line (\n) when y coordinate of current text tag is not equal to y coordinate of the previous tag. I did not implement it yet and will put the update here when I will finish and test it.

Upvotes: 1

Views: 1805

Answers (1)

NoteTheNote
NoteTheNote

Reputation: 593

I see what you´re trying to do here, but sadly when you use multiple text tags in one line there is no built in way for javascript to see where the line break is.

However, as you can see. All the text elements on the samle line have the same Y coordinate. So what you could do is to try to create a function that sorts the bulks of text in lines according to their text tags corresponding Y coordinate.

However this does sound like somewhat of a challenge.

Upvotes: 1

Related Questions