textLength
textLength 属性は、 SVGの <text> 要素と <tspan> 要素で利用でき、テキストが描かれる空間の幅を指定することができます。 ユーザーエージェントは、 lengthAdjust 属性で指定された方法を使用して、テキストがその長さよりも広がらないようにします。既定では、文字間の間隔のみが調整されますが、 lengthAdjust を変更すると、文字サイズも調整できます。
textLength を使用することで、ウェブフォントの読み込みに失敗した場合（または読み込まれていない場合）を含め、さまざまな条件に関わらず、 SVG テキストが同じ幅で表示されるように保証することができます。
この属性は以下の SVG 要素で使用できます。
例
<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textLength="6em">狭いテキスト幅</text> <text y="40" textLength="120%">広いテキスト幅</text> </svg> 使用上のメモ
| 値 | <length-percentage> | <number> |
|---|---|
| 既定値 | なし |
| アニメーション | 可 |
<length-percentage>-
この値は、テキストが占める空間を絶対長またはパーセント値として指定します。
<number>-
数値で、現在の座標系の単位を参照して長さの目安を示します。
インタラクティブサンプル
CSS
.controls { font: 16px "Open Sans", "Arial", sans-serif; } SVG
では、 SVG から始めましょう。これはかなり基本的なもので、 1000 × 300 ピクセルの空間が 10 × 3 センチのボックスに割り当てられています。
<svg width="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2" /> <text id="hello" x="10" y="150" font-family="sans-serif" font-size="60" fill="green"> Hello world! </text> </svg> 最初の段階では、テキストが含まれている矩形を作成し、その輪郭を描画するために、 <rect> 要素が使用されています。次に、 <text> を使用してテキスト要素自身を、 id を "hello" として作成します。
HTML
この HTML には、グループ化された <div> の中に含まれている 2 つの表示要素があります。
<div class="controls"> <input type="range" id="widthSlider" min="80" max="978" /> <span id="widthDisplay"></span> </div> <input> 要素は、表示型が "range" であり、ユーザーがテキストの幅を変更するために操作するスライダーコントロールを作成するために使用されます。 ID が "widthDisplay" である <span> 要素は、現在の幅の値を表示するためにあります。
JavaScript
最後に、JavaScript コードを見てみましょう。 まず、 Document.getElementById() を使用して、アクセスする必要がある要素への参照を保存します。
const widthSlider = document.getElementById("widthSlider"); const widthDisplay = document.getElementById("widthDisplay"); const textElement = document.getElementById("hello"); const baseLength = Math.floor(textElement.textLength.baseVal.value); widthSlider.value = baseLength; widthSlider.addEventListener( "input", (event) => { textElement.textLength.baseVal.newValueSpecifiedUnits( SVGLength.SVG_LENGTHTYPE_PX, widthSlider.valueAsNumber, ); widthDisplay.innerText = widthSlider.value; }, false, ); widthSlider.dispatchEvent(new Event("input")); 要素参照を取得した後、スライダーコントロールでイベントリスナーを addEventListener() を呼び出して確立し、発生する input イベントを受信できるようにします。これらのイベントは、ユーザーがスライダーの移動を停止していなくても、スライダーの値が変更されるたびに送信されるので、テキストの幅をレスポンスよく調整できます。
"input" イベントが発生すると、 newValueSpecifiedUnits() を呼び出して textLength の値をスライダーの新しい値に設定します。この際、 SVGLength インターフェイスの SVG_LENGTHTYPE_PX 単位型を使用して、値がピクセル単位で表されていることを示します。 textLength を掘り下げて、その baseVal プロパティを取得する必要があることに注意してください。 textLength は SVGLength オブジェクトとして格納されているため、単純な数値として扱うことはできません。
テキスト幅を更新すると、 widthDisplay ボックスのコンテンツも新しい値で更新され、完了です。
結果
この例では、スライダーをドラッグして、それが何をするのかを実際に試してみましょう。
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElementTextLengthAttribute |
ブラウザーの互換性
svg.elements.text.textLength
svg.elements.textPath.textLength
svg.elements.tspan.textLength
関連情報
- SVG チュートリアル: テキスト
SVGAnimatedLengthおよびSVGLength<text>