SVGTextContentElement: getCharNumAtPosition() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die getCharNumAtPosition()-Methode der SVGTextContentElement-Schnittstelle repräsentiert das Zeichen, das dazu führte, dass ein Text-Glyph an einer bestimmten Position im Koordinatensystem gerendert wurde. Da die Beziehung zwischen Zeichen und Glyphen nicht eins-zu-eins ist, wird nur das erste Zeichen des entsprechenden typografischen Zeichens zurückgegeben.

Wenn an der angegebenen Position kein Zeichen gefunden wird, wird -1 zurückgegeben.

html
<svg width="200" height="100">
  <text id="exampleText" x="10" y="40" font-size="16">Hello, SVG World!</text>
</svg>

js
const textElement = document.getElementById("exampleText");

// Create a DOMPoint for the position (30, 40)
const point = new DOMPoint(30, 40);

// Get the character at the specified position
const charIndex = textElement.getCharNumAtPosition(point);

console.log(charIndex); // Output: 2 (for character "l")

// Check with a point where no character is present
const offPoint = new DOMPoint(300, 40);
const offCharIndex = textElement.getCharNumAtPosition(offPoint);

console.log(offCharIndex); // Output: -1 (no character found)