検索結果

SVGTransformList

この記事内

SVG transform list interface
1. Interface overview
Properties
Methods
Example
1. Using multiple SVGTransform objects
Browser compatibility

この記事はまだボランティアによって日本語に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください！

SVG transform list interface

The SVGTransformList defines a list of SVGTransform objects.

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

Note: Starting in Gecko 9.0,the SVGTransformList DOM interface is now indexable and can be accessed like Arrays

Interface overview

Also implement	None
Methods	`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()`
Properties	readonly unsigned long `numberOfItems` readonly unsigned long `length`
Normative document	SVG 1.1 (2nd Edition)

Properties

Name	Type	Description
`numberOfItems`	unsigned long	The number of items in the list.
`length`	unsigned long	The number of items in the list.

Methods

Name & Arguments	Return	Description
`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`	Creates an `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.

Example

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, and 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="https://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:

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	?	(Yes)	?	(Yes)	?
`length`	?	9.0 (9.0)	?	11	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?
`length`	?	9.0 (9.0)	?	?	?

ドキュメントのタグと貢献者

タグ:

このページの貢献者: jwhitlock, fscholz, torbasow, kscarfone, seth_battin, Sheppy, arasbm, JohnBicknell, Jeremie

最終更新者: jwhitlock, 2015/08/12 15:47:56