JavaScript中的SVG转换

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();

这是单位矩阵.

然后你可以操纵这个 ......

matrix = matrix.translate(10, 10);

或直接......

matrix.a = 3;

然后使用它

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

getItem(0)获取transform属性中的第一个元素,例如

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

getItem(0)得到translate(1, 1)矩阵并getItem(1)得到scale(2)矩阵

如果你还没有在元素上设置变换,那么getItem(0)就会抛出.您可以检查使用的项目数量numberOfItems和/或添加初始项目,createSVGTransformFromMatrix以将矩阵转换为变换并appendItem附加变换.