SVGTransformList

在此页

SVG transform list interface
特性
方法
范例
规范
浏览器兼容性
相关话题

SVG transform list interface

SVGTransformList defines a list of SVGTransform 对象。

An SVGTransformList object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.

注意： Starting in Gecko 9.0 ,the SVGTransformList DOM interface is now indexable and can be accessed like Arrays

Interface overview

Also implement	None
方法	`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 SVGMatrix )` `SVGTransform` `consolidate()`
特性	readonly unsigned long `numberOfItems` readonly unsigned long `length`
Normative document	SVG 1.1 (2nd Edition)

特性

名称	类型	描述
`numberOfItems`	unsigned long	The number of items in the list.
`length`	unsigned long	The number of items in the list.

方法

Name & Arguments	返回	描述
`clear ()`	`void`	Clears all existing current items from the list, with the result being an empty list. Exceptions: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the list corresponds to a read only attribute or when the object itself is read only.
`initialize (in SVGTransform newItem )`	`SVGTransform`	Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. The return value is the item inserted into the list. Exceptions: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the list corresponds to a read only attribute or when the object itself is read only.
`getItem (in unsigned long index )`	`SVGTransform`	Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. The first item is number 0. Exceptions: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the list corresponds to a read only attribute or when the object itself is read only.
`insertItemBefore (in SVGTransform newItem , in unsigned long index )`	`SVGTransform`	Inserts a new item into the list at the specified position. The first item is number 0. If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item. If the `index` is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to `numberOfItems` , then the new item is appended to the end of the list. Exceptions: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the list corresponds to a read only attribute or when the object itself is read only.
`replaceItem (in SVGTransform newItem , in unsigned long index )`	`SVGTransform`	Replaces an existing item in the list with a new item. If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item. Exceptions: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the list corresponds to a read only attribute or when the object itself is read only. a `DOMException` with code `INDEX_SIZE_ERR` is raised if the index number is greater than or equal to `numberOfItems` .
`removeItem (in unsigned long index )`	`SVGTransform`	Removes an existing item from the list. Exceptions: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the list corresponds to a read only attribute or when the object itself is read only. a `DOMException` with code `INDEX_SIZE_ERR` is raised if the index number is greater than or equal to `numberOfItems` .
`appendItem (in SVGTransform newItem )`	`SVGTransform`	Inserts a new item at the end of the list. If `newItem` is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. Exceptions: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the list corresponds to a read only attribute or when the object itself is read only.
`createSVGTransformFromMatrix (in SVGMatrix )`	`SVGTransform`	创建 `SVGTransform` object which is initialized to transform of type `SVG_TRANSFORM_MATRIX` and whose values are the given matrix. The values from the parameter matrix are copied, the matrix parameter is not adopted as `SVGTransform::matrix` .
`consolidate ()`	`SVGTransform`	Consolidates the list of separate `SVGTransform` objects by multiplying the equivalent transformation matrices together to result in a list consisting of a single `SVGTransform` object of type `SVG_TRANSFORM_MATRIX` . The consolidation operation creates new `SVGTransform` object as the first and only item in the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. Exceptions: a `DOMException` with code `NO_MODIFICATION_ALLOWED_ERR` is raised when the list corresponds to a read only attribute or when the object itself is read only.

范例

Using multiple SVGTransform objects

In this example we create a function that will apply three different transformations to the SVG element that has been clicked on. In order to do this we create a separate SVGTransform object for each transformation -- such as translate , rotate ，和 scale . We apply multiple transformation by appending the transform object to the SVGTransformList associated with an SVG element.

<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
      var svgroot = evt.target.parentNode;
      // SVGTransformList of the element that has been clicked on
      var tfmList = evt.target.transform.baseVal;
      // Create a seperate transform object for each transform
      var translate = svgroot.createSVGTransform();
      translate.setTranslate(50,5);
      var rotate = svgroot.createSVGTransform();
      rotate.setRotate(10,0,0);
      var scale = svgroot.createSVGTransform();
      scale.setScale(0.8,0.8);
      // apply the transformations by appending the SVGTranform 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>

Live preview:

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'SVGTransformList' in that specification.	候选推荐
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGTransformList' in that specification.	推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`SVGTransformList`	Chrome Yes	Edge ≤18	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`length` 非标	Chrome Yes	Edge ≤79	Firefox 9	IE ?	Opera Yes	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android 9	Opera Android Yes	Safari iOS ?	Samsung Internet Android Yes

图例

完整支持
兼容性未知 ?
非标。预期跨浏览器支持较差。

元数据

最后修改： Jun 10, 2019

在此页