UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Steps to reproduce the problem:
Try the following test case: https://jsfiddle.net/1fqL50xp/3/
<svg width="600" height="600" style="border: 1px solid black" viewBox="0 0 2 2">
<rect id="myrect" fill="grey"/>
<text id="mytext" x="1" y="1" text-anchor="middle" font-size="0.5">test</text>text>
</svg>
var mytext = document.getElementById("mytext");
var myrect = document.getElementById("myrect");
var bbox = mytext.getBBox();
myrect.x.baseVal.value = bbox.x;
myrect.y.baseVal.value = bbox.y;
myrect.width.baseVal.value = bbox.width;
myrect.height.baseVal.value = bbox.height;
The displayed bounding box is not accurate. It is shifted left by a little.
It is accurate on other browsers, such as Firefox.
However, if x and y are zero, the bounding box *is* accurate: https://jsfiddle.net/1fqL50xp/4/
In addition, the value of text-anchor seems to affect the result. text-anchor="middle" is more inaccurate than text-anchor="start".
https://jsfiddle.net/1fqL50xp/5/
text-anchor="end" appears to be the most accurate.
I'm guessing perhaps this is a left-side-bearing issue?
What is the expected behavior?
rectangle bounds matched text bounds.
What went wrong?
Bounds are offset to the left.
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 60.0.3112.90 Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
Comment 1 by f...@opera.com
, Aug 21 2017Status: Available (was: Unconfirmed)