Comparing ways of getting SVG text width (v6)

Revision 6 of this benchmark created by Fritz Lekschas on

Description

There are three methods to assess a texts width:

  • getBoundingClientRect
  • getBBox
  • getComputedTextLength

See: http://bl.ocks.org/MSCAU/58bba77cdcae42fc2f44

NOTE: The three methods do not give the exact same length. See https://jsbin.com/tudusixeha/edit?html,js,console,output

Preparation HTML

<svg>
  <text id="test">Hello world</text>
</svg>

Setup

var width;
    var text = document.getElementById("test");

Test runner

Ready to run.

Testing in
TestOps/sec
getBoundingClientRect
width = text.getBoundingClientRect().width;
ready
getBBox
width = text.getBBox().width;
ready
getComputedTextLength
width = text.getComputedTextLength();
ready

Revisions

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