This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The getSubStringLength() method of the SVGTextContentElement interface represents the computed length of the formatted text advance distance for a substring of text within the element.
Note that this method only accounts for the widths of the glyphs in the substring and any extra spacing inserted by the CSS letter-spacing and word-spacing properties. Visual spacing adjustments made by the x attribute are ignored.
getSubStringLength(index, length)
indexAn integer; the start index of the substring.
lengthAn integer; the number of characters to include in the substring.
A float.
IndexSizeError DOMException
Thrown if the index is greater than the highest index or length is negative.
<svg width="300" height="100"> <text id="exampleText" x="10" y="50" font-size="16">Hello, SVG World!</text> </svg>
const textElement = document.getElementById("exampleText");
// Get the length of a substring starting at character 0 with 5 characters
const substringLength = textElement.getSubStringLength(0, 5);
console.log(substringLength); // Output: 35.55
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
getSubStringLength |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 | 1 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement/getSubStringLength