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

这是单位矩阵。

然后，您可以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以追加变换。