Open Bug 1720731 Opened 4 years ago Updated 1 years ago

SVG text selection bounding boxes depend on viewbox resolution.

Categories

(Core :: SVG, defect, P3)

Product:
Core
Component:
SVG
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: mju, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Steps to reproduce:

I have an SVG with high viewbox resolution. I need to determine the bounding box when a user selects text. I tried SVGs with different resolutions (listed in order of increasing resolutions). In each case the output in the browser looks the same:

Example 1:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-rotate-read="0" width="100px" height="100px" viewBox="0 0 10 10">
<text fill="#000000" font-family="'Arial', sans-serif" font-size="4" x="0" y="4">Test</text>
</svg>
Example 2:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-rotate-read="0" width="100px" height="100px" viewBox="0 0 100 100">
<text fill="#000000" font-family="'Arial', sans-serif" font-size="40" x="0" y="40">Test</text>
</svg>

Example 3:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-rotate-read="0" width="100px" height="100px" viewBox="0 0 1000 1000">
<text fill="#000000" font-family="'Arial', sans-serif" font-size="400" x="0" y="400">Test</text>
</svg>

Example 4:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-rotate-read="0" width="100px" height="100px" viewBox="0 0 10000 10000">
<text fill="#000000" font-family="'Arial', sans-serif" font-size="4000" x="0" y="4000">Test</text>
</svg>

Open svg files with the above content, select the text and compare the results of
document.getElementsByTagName('text')[0].getBoundingClientRect()
and
document.getSelection().getRangeAt(0).getBoundingClientRect()

Actual results:

As the viewbox resolution increases, the bounding box of the text element stays the same, but the bounding box of the selected text decreases. (Results for Range.getClientRects() are similar):

Result for example 1:
document.getElementsByTagName('text')[0].getBoundingClientRect()
-> DOMRect { x: -1, y: 3, width: 75.5, height: 46.18333435058594, top: 3, right: 74.5, bottom: 49.18333435058594, left: -1 }

document.getSelection().getRangeAt(0).getBoundingClientRect()
-> DOMRect { x: 0, y: 4, width: 78.36666870117188, height: 49, top: 4, right: 78.36666870117188, bottom: 53, left: 0 }

Result for example 2:
document.getElementsByTagName('text')[0].getBoundingClientRect()
DOMRect { x: -1, y: 3, width: 75.38333129882812, height: 46, top: 3, right: 74.38333129882812, bottom: 49, left: -1 }

document.getSelection().getRangeAt(0).getBoundingClientRect()
DOMRect { x: 0, y: 4, width: 73.36666870117188, height: 44, top: 4, right: 73.36666870117188, bottom: 48, left: 0 }

Result for example 3:
document.getElementsByTagName('text')[0].getBoundingClientRect()
DOMRect { x: -1, y: 3, width: 75.38333129882812, height: 46.01666259765625, top: 3, right: 74.38333129882812, bottom: 49.01666259765625, left: -1 }

document.getSelection().getRangeAt(0).getBoundingClientRect()
DOMRect { x: 0, y: 4, width: 7.3333282470703125, height: 4.399993896484375, top: 4, right: 7.3333282470703125, bottom: 8.399993896484375, left: 0 }

Result for example 4:
document.getElementsByTagName('text')[0].getBoundingClientRect()
DOMRect { x: -1, y: 2.98333740234375, width: 75.38333129882812, height: 46.0333251953125, top: 2.98333740234375, right: 74.38333129882812, bottom: 49.01666259765625, left: -1 }

document.getSelection().getRangeAt(0).getBoundingClientRect()
DOMRect { x: 0, y: 4, width: 0.73333740234375, height: 0.4333343505859375, top: 4, right: 0.73333740234375, bottom: 4.4333343505859375, left: 0 }

Expected results:

I would expect the bounding box of the selected text to be somewhat close to the bounding box of the actual text element (if the whole text of the element is selected)

Component: Untriaged → SVG
Product: Firefox → Core
Severity: -- → S3
Priority: -- → P3

The description of Severity S3 is "(Normal) Blocks non-critical functionality and a work around exists". I'm not aware of a workaround for this issue, but if there is one, could you please outline it here?

Seems OK now.

Status: UNCONFIRMED → RESOLVED
Closed: 1 years ago
Resolution: --- → WORKSFORME

With which version did you test this? I can still reproduce it with 121.0.1

I tested on a Mac on 121.0.1

Status: RESOLVED → UNCONFIRMED
Resolution: WORKSFORME → ---

On Windows I still get the same results as I reported originally, e.g. for example 4 with viewBox="0 0 10000 10000":

document.getElementsByTagName('text')[0].getBoundingClientRect()
-> DOMRect { x: -1, y: 2.98333740234375, width: 75.38333129882812, height: 46.0333251953125, top: 2.98333740234375, right: 74.38333129882812, bottom: 49.01666259765625, left: -1 }

document.getSelection().getRangeAt(0).getBoundingClientRect()
-> DOMRect { x: 0, y: 4, width: 0.73333740234375, height: 0.4333343505859375, top: 4, right: 0.73333740234375, bottom: 4.4333343505859375, left: 0 }

The selection rect is very different from the actional rect of the selected text, but they should be more or less the same.

You need to log in before you can comment on or make changes to this bug.