This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The getStartPositionOfChar() method of the SVGTextContentElement interface returns the position of a typographic character after text layout has been performed.
getStartPositionOfChar(index)
indexAn integer; the index of the character.
A DOMPoint object; the position of the character in user coordinates.
IndexSizeError DOMException
Thrown if no character is found at index.
<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 position of the character at index 0 (the first character)
const position = textElement.getStartPositionOfChar(0);
// Get the x and y coordinates of the first character
console.log(position.x, position.y); // Output: 10 50
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2> # __svg__SVGTextContentElement__getStartPositionOfChar> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
getStartPositionOfChar |
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/getStartPositionOfChar