SVGTransform: свойство matrix

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

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

Чтение только свойство matrix интерфейса SVGTransform представляет собой матрицу преобразования, соответствующую преобразованию type.

В случае, если объект matrix изменяется непосредственно (т. е., без использования методов самого интерфейса SVGTransform), то свойство type объекта SVGTransform изменяется на SVG_TRANSFORM_MATRIX.

Для SVG_TRANSFORM_MATRIX, матрица содержит значения a, b, c, d, e, f, заданные пользователем.
Для SVG_TRANSFORM_TRANSLATE, e и f представляют собой значения смещения (a=1, b=0, c=0 и d=1).
Для SVG_TRANSFORM_SCALE, a и d представляют собой значения масштабирования (b=0, c=0, e=0 и f=0).
Для SVG_TRANSFORM_SKEWX и SVG_TRANSFORM_SKEWY, a, b, c и d представляют собой матрицу, которая приведет к заданному наклону (e=0 и f=0).
Для SVG_TRANSFORM_ROTATE, значения a, b, c, d, e и f вместе представляют матрицу, которая приведет к заданному повороту. Когда поворот происходит вокруг центральной точки (0, 0), e и f будут равны нулю.

Значение

Живой объект DOMMatrix.

Примеры

Доступ и изменение матрицы

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect" x="50" y="50" width="100" height="100" fill="red" />
</svg>

const rect = document.getElementById("rect");
const transformList = rect.transform.baseVal;

// Create and add a rotation transform
const rotateTransform = rect.ownerSVGElement.createSVGTransform();
rotateTransform.setRotate(30, 100, 100); // Rotate 30 degrees
transformList.appendItem(rotateTransform);

// Access the matrix
const matrix = transformList.getItem(0).matrix;
console.log(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);

// Modify the matrix directly
matrix.a = 2; // Double the horizontal scaling
console.log(transformList.getItem(0).type); // Output: 1 (SVG_TRANSFORM_MATRIX)

Понимание типов преобразований

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect" x="50" y="50" width="100" height="100" fill="blue" />
</svg>

const rect = document.getElementById("rect");
const transformList = rect.transform.baseVal;

// Apply a translation transform
const translateTransform = rect.ownerSVGElement.createSVGTransform();
translateTransform.setTranslate(20, 30);
transformList.appendItem(translateTransform);

// Access the matrix
const matrix = transformList.getItem(0).matrix;
console.log(matrix.e, matrix.f); // Output: 20, 30
console.log(transformList.getItem(0).type); // Output: 2 (SVG_TRANSFORM_TRANSLATE)

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

Спецификация
Векторная графика SVG (SVG) 2 # __svg__SVGTransform__matrix

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`matrix`	1	12	1.5	≤12.1	4	18	4	≤12.1	3.2	1.0	≤37

См. также

© 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/SVGTransform/matrix