Comparing ways of getting SVG text width and height (v5)

Revision 5 of this benchmark created on

Description

Comparing use of HTMLElement.offsetWidth and jQuery .width() to get width of SVG text. Also check for height.

Mozilla explicitly considers HTMLElement.offsetWidth/Height to be invalid for SVG and report these as undefined. IE10 also reports undefined. With $.width()/.height(), Mozilla and IE10 report values of 0.

Mozilla and IE10 produce expected values with .getComputedTextLength(), though that only helps for width, not height.

Chrome and Safari give nonzero values for all of the above.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<svg>
  <text x="156" y="90" width="190" height="40.22" style="display: inline;"
    <tspan pointer-events="none" justification="start">
<tspan pointer-events="none">
        <tspan id="inner_span" pointer-events="none" x="0" y="33" font-family="Arial" font-size="36" fill="#000000" color="#000000">Hello world</tspan>
      </tspan>
    </tspan>
  </text>
</svg>

Setup

var width, height;
    var textSelector = $("#inner_span");

Teardown


    width = 0;
    height = 0;
    textSelector = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
use offsetWidth and offsetHeight
width = textSelector[0].offsetWidth;
height = textSelector[0].offsetHeight;
ready
use getBBox .width and .height
var box = textSelector[0].getBBox();
width = box.width;
height = box.height;
ready
use getComputedTextLength()
width = textSelector[0].getComputedTextLength();
ready
use getComputedStyle
width = window.getComputedStyle(textSelector[0]).getPropertyValue('width');
height = window.getComputedStyle(textSelector[0]).getPropertyValue('height');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.