SVGLengthList
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
SVGLengthList インターフェイスは、 SVGLength オブジェクトのリストを定義します。これは、 SVGAnimatedLengthList の baseVal および animVal プロパティで使用します。
SVGLengthList オブジェクトは読み取り専用として指定することができます。すなわち、オブジェクトを変更しようとすると例外が発生するようにすることができます。
SVGLengthList オブジェクトはインデックス指定可能であり、配列のようにアクセスすることができます。
インスタンスプロパティ
length-
リスト内のアイテム数です。
numberOfItems-
リスト内のアイテム数です。
インスタンスメソッド
appendItem()-
新しいアイテムをリストの末尾に追加します。
clear()-
リストから既存のアイテムをすべて削除し、リストを空にします。
initialize()-
リストから既存のアイテムをすべて削除し、引数で指定した単一のアイテムを保持するようにリストを再初期化します。
getItem()-
リストから特定のアイテムを返します。
insertItemBefore()-
新しいアイテムをリストの指定した位置に挿入します。
removeItem()-
リストから既存のアイテムを除去します。
replaceItem()-
リスト内の既存のアイテムを新しいアイテムで置き換えます。
例
SVGLengthList の使用
SVGLengthList オブジェクトは、 SVGAnimatedLengthList オブジェクトから取得できます。これは、 SVGTextPositioningElement.x などの多くのアニメーション化可能な長さの属性から取得できます。
HTML
html
<svg
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
width="200"
height="100">
<text id="text1" x="10" y="50">Hello</text>
</svg>
<button id="equally-distribute">文字を均等配置</button>
<button id="reset-spacing">間隔をリセット</button>
<div>
<b>現在の <code>SVGLengthList</code></b>
<pre><output id="output"></output></pre>
</div>
JavaScript
js
const text = document.getElementById("text1");
const output = document.getElementById("output");
const list = text.x.baseVal;
function equallyDistribute() {
list.clear();
for (let i = 0; i < text.textContent.length; i++) {
const length = text.ownerSVGElement.createSVGLength();
length.value = i * 20 + 10;
list.appendItem(length);
}
printList();
}
function resetSpacing() {
const length = text.ownerSVGElement.createSVGLength();
length.value = 10;
list.initialize(length);
printList();
}
function printList() {
output.textContent = "";
for (let i = 0; i < list.length; i++) {
output.innerText += list.getItem(i).value + "\n";
}
}
printList();
document
.getElementById("equally-distribute")
.addEventListener("click", equallyDistribute);
document
.getElementById("reset-spacing")
.addEventListener("click", resetSpacing);
結果
仕様書
| 仕様書 |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGLengthList |