SVGTextContentElement: getCharNumAtPosition() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
getCharNumAtPosition() は SVGTextContentElement インターフェイスのメソッドで、指定された座標の位置にテキストグリフがレンダリングされた文字を表します。文字とグリフの関係は一対一ではないため、関連するタイポグラフィ文字の最初の文字のみが返されます。
指定した位置で文字がみつからない場合は、 -1 が返されます。
構文
js
getCharNumAtPosition(point)
引数
返値
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 （文字が見つからない）
仕様書
| 仕様書 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGTextContentElement__getCharNumAtPosition |