SVGTransformList
SVGTransformList 介面定義了一個 SVGTransform
SVGTransformList 物件可以被指定為只讀，這意味著嘗試修改該物件將導致丟擲異常。
SVGTransformList 是可索引的，並且可以像陣列一樣訪問。
例項屬性
numberOfItems-
列表中專案的數量。
length-
列表中專案的數量。
例項方法
clear()-
清除列表中所有現有的當前專案，結果是一個空列表。
initialize()-
清除列表中所有現有的當前專案，並將列表重新初始化為包含引數指定的單個專案。如果插入的專案已在列表中，則在插入到此列表之前，它將從其先前列表中移除。插入的專案是它本身，而不是副本。返回值是插入到列表中的專案。
getItem()-
從列表中返回指定的專案。返回的專案是它本身，而不是副本。對該專案的任何更改將立即反映在列表中。第一個專案的編號是
0。 insertItemBefore()-
在指定位置將新專案插入到列表中。第一個專案的編號是
0。如果newItem已在列表中，則在插入到此列表之前，它將從其先前列表中移除。插入的專案是它本身，而不是副本。如果該專案已在此列表中，請注意要插入的專案之前的索引是在移除該專案之前的。如果index等於 0，則新專案將插入到列表的開頭。如果索引大於或等於numberOfItems，則新專案將追加到列表的末尾。 replaceItem()-
用新專案替換列表中的現有專案。如果
newItem已在列表中，則在插入到此列表之前，它將從其先前列表中移除。插入的專案是它本身，而不是副本。如果該專案已在此列表中，請注意要替換的專案索引是在移除該專案之前的。 removeItem()-
從列表中移除現有專案。
appendItem()-
將新專案插入到列表的末尾。如果
newItem已在列表中，則在插入到此列表之前，它將從其先前列表中移除。插入的專案是它本身，而不是副本。 createSVGTransformFromMatrix()-
建立一個
SVGTransform物件，該物件被初始化為SVG_TRANSFORM_MATRIX型別的變換，其值是給定的矩陣。引數矩陣中的值會被複制，引數矩陣本身不會被採納為SVGTransform::matrix。 consolidate()-
透過將等效的變換矩陣相乘來合併單獨的
SVGTransform物件列表，從而生成一個僅包含一個SVG_TRANSFORM_MATRIX型別SVGTransform物件的列表。合併操作將建立一個新的SVGTransform物件作為列表中的第一個也是唯一一個專案。返回的專案是它本身，而不是副本。對該專案的任何更改將立即反映在列表中。
示例
使用多個 SVGTransform 物件
在此示例中，我們建立了一個函式，該函式將對被點選的 SVG 元素應用三種不同的變換。為此，我們為每種變換（如 translate、rotate 和 scale）建立一個單獨的 SVGTransform 物件。我們透過將變換物件追加到與 SVG 元素關聯的 SVGTransformList 來應用多個變換。
<svg
id="my-svg"
viewBox="0 0 300 280"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<desc>
Example showing how to transform svg elements that using SVGTransform
objects
</desc>
<polygon
fill="orange"
stroke="black"
stroke-width="5"
points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225" />
<rect
x="200"
y="100"
width="100"
height="100"
fill="yellow"
stroke="black"
stroke-width="5" />
<text x="40" y="250" font-family="Verdana" font-size="16" fill="green">
Click on a shape to transform it
</text>
</svg>
function transformMe(evt) {
// svg root element to access the createSVGTransform() function
const svgRoot = evt.target.parentNode;
// SVGTransformList of the element that has been clicked on
const tfmList = evt.target.transform.baseVal;
// Create a separate transform object for each transform
const translate = svgRoot.createSVGTransform();
translate.setTranslate(50, 5);
const rotate = svgRoot.createSVGTransform();
rotate.setRotate(10, 0, 0);
const scale = svgRoot.createSVGTransform();
scale.setScale(0.8, 0.8);
// apply the transformations by appending the SVGTransform objects to the SVGTransformList associated with the element
tfmList.appendItem(translate);
tfmList.appendItem(rotate);
tfmList.appendItem(scale);
}
document.querySelector("polygon").addEventListener("click", transformMe);
document.querySelector("rect").addEventListener("click", transformMe);
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGTransformList |
瀏覽器相容性
載入中…