how to manipulate a svg matrix with javascript [duplicate]

Each <svg> element has a createSVGMatrix dom method.

var matrix = svgElement.createSVGMatrix();

This is the identity matrix.

You can then manipulate this...

matrix = matrix.translate(10, 10);

or directly...

matrix.a = 3;

and then use it

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

getItem(0) gets the first element in a transform attribute e.g.

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

getItem(0) gets the translate(1, 1) matrix and getItem(1) gets the scale(2) matrix

If you haven't set a transform on an element then getItem(0) will throw. You can check how many items there are using numberOfItems and/or add an initial item using createSVGTransformFromMatrix to turn your matrix into a transform and appendItem to append the transform.