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