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 |
浏览器兼容性
加载中…