SVGLengthList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Giao diện SVGLengthList định nghĩa một danh sách các đối tượng SVGLength. Nó được sử dụng cho các thuộc tính baseVal và animVal của SVGAnimatedLengthList.
Một đối tượng SVGLengthList có thể được chỉ định là chỉ đọc, nghĩa là các nỗ lực sửa đổi đối tượng sẽ dẫn đến việc ném ra một ngoại lệ.
Một đối tượng SVGLengthList có thể được đánh chỉ mục và truy cập như một mảng.
Thuộc tính phiên bản
length-
Số lượng phần tử trong danh sách.
numberOfItems-
Số lượng phần tử trong danh sách.
Phương thức phiên bản
appendItem()-
Chèn một phần tử mới vào cuối danh sách.
clear()-
Xóa tất cả các phần tử hiện có khỏi danh sách, kết quả là một danh sách rỗng.
initialize()-
Xóa tất cả các phần tử hiện có khỏi danh sách và khởi tạo lại danh sách để chứa phần tử duy nhất được chỉ định bởi tham số.
getItem()-
Trả về phần tử được chỉ định từ danh sách.
insertItemBefore()-
Chèn một phần tử mới vào danh sách tại vị trí được chỉ định.
removeItem()-
Xóa một phần tử hiện có khỏi danh sách.
replaceItem()-
Thay thế một phần tử hiện có trong danh sách bằng một phần tử mới.
Ví dụ
Sử dụng SVGLengthList
Đối tượng SVGLengthList có thể được lấy từ đối tượng SVGAnimatedLengthList, bản thân nó có thể được lấy từ nhiều thuộc tính độ dài có thể hoạt hình, chẳng hạn như SVGTextPositioningElement.x.
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
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);
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGLengthList |