SVGTransformList

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Интерфейс списка преобразований 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()`
Свойства	только для чтения unsigned long `numberOfItems` только для чтения unsigned long `length`
Нормативный документ	SVG 1.1 (2-е издание)

Свойства экземпляра

Имя	Тип	Описание
`numberOfItems`	unsigned long	Количество элементов в списке.
`length`	unsigned long	Количество элементов в списке.

Методы экземпляра

Имя и аргументы	Возврат	Описание
`clear()`	`void`	Очищает все существующие текущие элементы из списка, в результате чего список становится пустым. Исключения: `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` выбрасывается, когда список соответствует атрибуту только для чтения или когда сам объект является только для чтения.
`initialize(in SVGTransform newItem)`	`SVGTransform`	Очищает все существующие текущие элементы из списка и повторно инициализирует список, чтобы он содержал единственный элемент, указанный параметром. Если вставленный элемент уже находится в списке, он удаляется из своего предыдущего списка перед вставкой в этот список. Вставленный элемент — это сам элемент, а не его копия. Возвращаемым значением является вставленный в список элемент. Исключения: `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` выбрасывается, когда список соответствует атрибуту только для чтения или когда сам объект является только для чтения.
`getItem(in unsigned long index)`	`SVGTransform`	Возвращает указанный элемент из списка. Возвращаемым элементом является сам элемент, а не его копия. Любые изменения, внесенные в элемент, немедленно отражаются в списке. Первый элемент имеет номер 0. Исключения: `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` выбрасывается, когда список соответствует атрибуту только для чтения или когда сам объект является только для чтения.
`insertItemBefore(in SVGTransform newItem, in unsigned long index)`	`SVGTransform`	Вставляет новый элемент в список в указанную позицию. Первый элемент имеет номер 0. Если `newItem` уже находится в списке, он удаляется из своего предыдущего списка перед вставкой в этот список. Вставленный элемент — это сам элемент, а не его копия. Если элемент уже находится в этом списке, обратите внимание, что индекс вставляемого элемента перед удалением элемента. Если `index` равно 0, новый элемент вставляется в начало списка. Если индекс больше или равен `numberOfItems`, новый элемент добавляется в конец списка. Исключения: `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` выбрасывается, когда список соответствует атрибуту только для чтения или когда сам объект является только для чтения.
`replaceItem(in SVGTransform newItem, in unsigned long index)`	`SVGTransform`	Заменяет существующий элемент в списке новым элементом. Если `newItem` уже находится в списке, он удаляется из своего предыдущего списка перед вставкой в этот список. Вставленный элемент — это сам элемент, а не его копия. Если элемент уже находится в этом списке, обратите внимание, что индекс элемента, который нужно заменить, находится перед удалением элемента. Исключения: `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` выбрасывается, когда список соответствует атрибуту только для чтения или когда сам объект является только для чтения. `DOMException` с кодом `INDEX_SIZE_ERR` выбрасывается, если номер индекса больше или равен `numberOfItems`.
`removeItem(in unsigned long index)`	`SVGTransform`	Удаляет существующий элемент из списка. Исключения: `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` выбрасывается, когда список соответствует атрибуту только для чтения или когда сам объект является только для чтения. `DOMException` с кодом `INDEX_SIZE_ERR` выбрасывается, если номер индекса больше или равен `numberOfItems`.
`appendItem(in SVGTransform newItem)`	`SVGTransform`	Вставляет новый элемент в конец списка. Если `newItem` уже находится в списке, он удаляется из своего предыдущего списка перед вставкой в этот список. Вставленный элемент — это сам элемент, а не его копия. Исключения: `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` выбрасывается, когда список соответствует атрибуту только для чтения или когда сам объект является только для чтения.
`createSVGTransformFromMatrix(in DOMMatrix)`	`SVGTransform`	Создаёт объект `SVGTransform`, инициализированный преобразованием типа `SVG_TRANSFORM_MATRIX`, значения которого — заданная матрица. Значения из параметра матрицы копируются, параметр матрицы не принимается как `SVGTransform::matrix`.
`consolidate()`	`SVGTransform`	Объединяет список отдельных объектов `SVGTransform` путём умножения эквивалентных матриц преобразования, чтобы в результате получился список, состоящий из одного объекта `SVGTransform` типа `SVG_TRANSFORM_MATRIX`. Операция объединения создаёт новый объект `SVGTransform` в качестве первого и единственного элемента списка. Возвращаемым элементом является сам элемент, а не его копия. Любые изменения, внесенные в элемент, немедленно отражаются в списке. Исключения: `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` выбрасывается, когда список соответствует атрибуту только для чтения или когда сам объект является только для чтения.

Примеры

Использование нескольких объектов SVGTransform

В этом примере создаётся функция, которая будет применять три различных преобразования к элементу SVG, на который была нажата кнопка. Для этого мы создаём отдельный объект SVGTransform для каждого преобразования — например, translate, rotate, и scale. Мы применяем несколько преобразований, добавляя объект преобразования в SVGTransformList , связанный с элементом SVG.

<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>

Предварительный просмотр:

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # InterfaceSVGTransformList

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`SVGTransformList`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`appendItem`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`clear`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`consolidate`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`createSVGTransformFromMatrix`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`getItem`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`initialize`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`insertItemBefore`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`length`	35	79	9	≤12.1	13.1	35	9	≤12.1	13.4	1.0	37
`numberOfItems`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`removeItem`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`replaceItem`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGTransformList