SVGLengthList
SVGLengthList 介面定義了一個 SVGLengthSVGAnimatedLengthListbaseValanimVal
SVGLengthList 物件可以被指定為只讀，這意味著嘗試修改該物件將導致丟擲異常。
SVGLengthList 物件是可索引的，可以像陣列一樣訪問。
例項屬性
length-
列表中專案的數量。
numberOfItems-
列表中專案的數量。
例項方法
appendItem()-
在列表末尾插入一個新項。
clear()-
清除列表中的所有現有項，結果將是一個空列表。
initialize()-
清除列表中的所有現有項，並將列表重新初始化為只包含引數指定的單個項。
getItem()-
從列表中返回指定的項。
insertItemBefore()-
在指定位置將一個新項插入到列表中。
removeItem()-
從列表中移除現有專案。
replaceItem()-
用新項替換列表中的現有項。
示例
使用 SVGLengthList
可以從 SVGAnimatedLengthListSVGLengthList 物件，而 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">Equally distribute letters</button>
<button id="reset-spacing">Reset spacing</button>
<div>
<b>Current <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 |
瀏覽器相容性
載入中…