SVGTextPositioningElement: y プロパティ

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月⁩.

y は SVGTextPositioningElement インターフェイスの読み取り専用プロパティで、SVGTextElement、SVGTSpanElement、SVGTRefElement の Y 座標を SVGAnimatedLengthList で記述します。これは dy 属性の、ユーザー座標系における個々のテキスト文字の垂直方向の位置を反映します。

属性値は、<length>、<percentage>、<number> のリストです。 SVGAnimatedLengthList.baseVal の数値は、ユーザー座標系における個々のテキスト文字の Y 座標を反映します。

値

An SVGAnimatedLengthList.

例

次の SVG があったとします。

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="20">Hello</text>
  <text x="50" y="50">World</text>
</svg>

次のようにして、 y 属性の計算値にアクセスすることができます。

const texts = document.querySelectorAll("text");

console.log(texts[0].y.baseVal[0].value); // 出力: 20
console.log(texts[1].y.baseVal[0].value); // 出力: 50