1

I need the bounding box of an SVG text-element, but the API functions getBBox and getComputedTextLength (which should theoretically do what I want) are very unstable.

The returned values are usualy too small if I zoom into the svg element using a matrix transformation.

Example html:

<svg preserveAspectRatio="none" viewBox="-1 -1 2 2">
    <g transform="matrix(0.02 0 0 0.02 -0.7 0)">
        <text x="0" y="0" font-family="Verdana" font-size="10">
            Some long text
        </text>
    </g>
</svg>

The length of this text (as returned by getComputedTextLength) should be about 76. However, if I change the transform matrix to matrix(3 0 0 3 -0.7 0.01), the total length is now much lower (about 19).

Life example: https://codepen.io/anon/pen/QvgRaR

Note: The problem appears on both Google Chrome and Firefox, but not in Microsoft Edge.

How can I reliably retrieve the bounding box of an SVG element, regardless of any scaling?

maja
  • 17,250
  • 17
  • 82
  • 125
  • 1
    Looking at your example, I'm now getting all values equal in chrome and 76, 76, 451 in Firefox. https://stackoverflow.com/a/6288558/6571327 has an explanation of the calculation of transformed bboxes that may help. – Steven Kalt Nov 20 '18 at 15:50

0 Answers0