SVGTransformList

SVG 变换列表接口

SVGTransformList 定义了一个 SVGTransform 对象列表。

SVGTransformList 对象可以被指定为只读，这意味着尝试修改该对象将导致抛出异常。

SVGTransformList 是可索引的，可以像数组一样访问。

接口概述

也实现	无
方法	`void clear()` `SVGTransform` `initialize(in SVGTransform newItem)` `SVGTransform` `getItem(in unsigned long index)` `SVGTransform` `insertItemBefore(in SVGTransform newItem, in unsigned long index)` `SVGTransform` `replaceItem(in SVGTransform newItem, in unsigned long index)` `SVGTransform` `removeItem(in unsigned long index)` `SVGTransform` `appendItem(in SVGTransform newItem)` `SVGTransform` `createSVGTransformFromMatrix(in DOMMatrix)` `SVGTransform` `consolidate()`
属性	readonly unsigned long `numberOfItems` readonly unsigned long `length` 非标准
规范性文档	SVG 1.1 (第二版)

实例属性

名称	类型	描述
`numberOfItems`	unsigned long	列表中的项目数。
`length` 非标准	unsigned long	列表中的项目数。

实例方法

名称和参数	返回	描述
`clear()`	`void`	清除列表中所有现有的当前项目，结果为空列表。异常当列表对应于只读属性或对象本身为只读时，会引发代码为 `NO_MODIFICATION_ALLOWED_ERR` 的 `DOMException`。
`initialize(in SVGTransform newItem)`	`SVGTransform`	清除列表中所有现有的当前项目，并重新初始化列表以保存参数指定的单个项目。如果插入的项目已存在于列表中，则在将其插入此列表之前将其从其以前的列表中删除。插入的项目是项目本身，而不是副本。返回值是插入到列表中的项目。异常当列表对应于只读属性或对象本身为只读时，会引发代码为 `NO_MODIFICATION_ALLOWED_ERR` 的 `DOMException`。
`getItem(in unsigned long index)`	`SVGTransform`	返回列表中指定的项目。返回的项目是项目本身，而不是副本。对项目进行的任何更改都会立即反映在列表中。第一个项目编号为 0。异常当列表对应于只读属性或对象本身为只读时，会引发代码为 `NO_MODIFICATION_ALLOWED_ERR` 的 `DOMException`。
`insertItemBefore(in SVGTransform newItem, in unsigned long index)`	`SVGTransform`	在指定位置将新项目插入列表中。第一个项目编号为 0。如果 `newItem` 已存在于列表中，则在将其插入此列表之前将其从其以前的列表中删除。插入的项目是项目本身，而不是副本。如果项目已存在于此列表中，请注意，在删除项目之前要插入的项目之前的索引。如果 `index` 等于 0，则将新项目插入列表的开头。如果索引大于或等于 `numberOfItems`，则将新项目追加到列表的末尾。异常当列表对应于只读属性或对象本身为只读时，会引发代码为 `NO_MODIFICATION_ALLOWED_ERR` 的 `DOMException`。
`replaceItem(in SVGTransform newItem, in unsigned long index)`	`SVGTransform`	用新项目替换列表中的现有项目。如果 `newItem` 已存在于列表中，则在将其插入此列表之前将其从其以前的列表中删除。插入的项目是项目本身，而不是副本。如果项目已存在于此列表中，请注意，在删除项目之前要替换的项目的索引。异常当列表对应于只读属性或对象本身为只读时，会引发代码为 `NO_MODIFICATION_ALLOWED_ERR` 的 `DOMException`。如果索引号大于或等于 `numberOfItems`，则会引发代码为 `INDEX_SIZE_ERR` 的 `DOMException`。
`removeItem(in unsigned long index)`	`SVGTransform`	从列表中删除现有项目。异常当列表对应于只读属性或对象本身为只读时，会引发代码为 `NO_MODIFICATION_ALLOWED_ERR` 的 `DOMException`。如果索引号大于或等于 `numberOfItems`，则会引发代码为 `INDEX_SIZE_ERR` 的 `DOMException`。
`appendItem(in SVGTransform newItem)`	`SVGTransform`	在列表末尾插入新项目。如果 `newItem` 已存在于列表中，则在将其插入此列表之前将其从其以前的列表中删除。插入的项目是项目本身，而不是副本。异常当列表对应于只读属性或对象本身为只读时，会引发代码为 `NO_MODIFICATION_ALLOWED_ERR` 的 `DOMException`。
`createSVGTransformFromMatrix(in DOMMatrix)`	`SVGTransform`	创建一个 `SVGTransform` 对象，该对象初始化为类型为 `SVG_TRANSFORM_MATRIX` 的变换，其值为给定的矩阵。参数矩阵中的值会被复制，矩阵参数不会被用作 `SVGTransform::matrix`。
`consolidate ()`	`SVGTransform`	将单独的`SVGTransform`对象列表合并，将等效的转换矩阵相乘，得到一个仅包含一个类型为`SVG_TRANSFORM_MATRIX`的`SVGTransform`对象的列表。合并操作会创建一个新的`SVGTransform`对象作为列表中第一个也是唯一的一个项目。返回的项目是项目本身，而不是副本。对该项目进行的任何更改都会立即反映在列表中。异常当列表对应于只读属性或对象本身为只读时，会引发代码为 `NO_MODIFICATION_ALLOWED_ERR` 的 `DOMException`。

示例

使用多个SVGTransform对象

在此示例中，我们创建一个函数，该函数将对已单击的SVG元素应用三种不同的转换。为此，我们为每个转换（例如translate、rotate和scale）创建一个单独的SVGTransform对象。我们通过将转换对象附加到与SVG元素关联的SVGTransformList来应用多个转换。

html

<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>
  <script type="application/ecmascript">
    <![CDATA[
      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);
      }
    ]]>
  </script>

  <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"
    onclick="transformMe(evt)" />
  <rect
    x="200"
    y="100"
    width="100"
    height="100"
    fill="yellow"
    stroke="black"
    stroke-width="5"
    onclick="transformMe(evt)" />
  <text x="40" y="250" font-family="Verdana" font-size="16" fill="green">
    Click on a shape to transform it
  </text>
</svg>

实时预览

规范

规范
可缩放矢量图形 (SVG) 2 # 接口SVGTransformList

浏览器兼容性

BCD 表格仅在浏览器中加载