SVGTextContentElement: getCharNumAtPosition() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

getCharNumAtPosition() は SVGTextContentElement インターフェイスのメソッドで、指定された座標の位置にテキストグリフがレンダリングされた文字を表します。文字とグリフの関係は一対一ではないため、関連するタイポグラフィ文字の最初の文字のみが返されます。

指定した位置で文字がみつからない場合は、 -1 が返されます。

構文

getCharNumAtPosition(point)

引数

point

DOMPoint オブジェクトです。ユーザー座標空間で文字の位置を調べる座標 (x, y) です。

返値

long 型です。位置に対応する文字のインデックス。

例

指定された位置の文字を探す

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");

// DOMPoint を (30, 40) の位置で作成
const point = new DOMPoint(30, 40);

// 指定された位置の文字を取得
const charIndex = textElement.getCharNumAtPosition(point);

console.log(charIndex); // 出力: 2 (文字 "l")

// 文字が存在しない位置の点をチェック
const offPoint = new DOMPoint(300, 40);
const offCharIndex = textElement.getCharNumAtPosition(offPoint);

console.log(offCharIndex); // 出力: -1 （文字が見つからない）