SVG Преобразования в JavaScript

Question

SVG Трансформации можно выполнить с помощью JavaScript с помощью настроек соответствующих атрибутов setAttribute("transform", "translate(x,y)"), но также должно быть возможно через JavaScript.

elem.transform.baseVal.getItem(0).setTranslate(x, y); 
elem.transform.baseVal.getItem(0).setRotate(x, y); 

Эти два должны работать для перевода и вращения, но как насчет перекоса, масштабирования и матрицы? elem.transform.baseVal.getItem(0).setMatrix() существует, но насколько я могу судить, он не исключает никаких параметров и SVGCreateMatrix() не принимает никаких параметров. Как я должен это делать, и в качестве бонусного вопроса: что делает getItem(0)?

Answer 1

Каждый элемент <svg> имеет метод createSVGMatrix dom.

var matrix = svgElement.createSVGMatrix(); 

Это единичная матрица.

Вы можете manipulate this ...

matrix = matrix.translate(10, 10); 

или непосредственно ...

matrix.a = 3; 

, а затем использовать его

elem.transform.baseVal.getItem(0).setMatrix(matrix); 

getItem(0) получает первый элемент в преобразовании атрибута например

transform="translate(1, 1) scale(2)" 

getItem(0) получает translate(1, 1) матрицу и getItem(1) получает scale(2) матрицу

Если вы не установили преобразование элемента, то getItem(0) бросит. Вы можете проверить, сколько элементов есть numberOfItems и/или добавить начальный элемент, используя createSVGTransformFromMatrix, чтобы превратить вашу матрицу в преобразование и appendItem, чтобы добавить преобразование.