SVG Transformations in JavaScript

Question

SVG Transformations can be done through JavaScript by settings their corresponding attributes setAttribute("transform", "translate(x,y)") but should also be possible through pure JavaScript.

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

These two should work for translation and rotation, but how about skewing, scaling and matrix? elem.transform.baseVal.getItem(0).setMatrix() exists, but as far as I can tell, it doesn't excepts any params and SVGCreateMatrix() does not accept any params either. How am I supposed to do this, and as a bonus question: what does getItem(0) actually do?

Answer 1

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.