JavaScript中的SVG转换

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）

实际上做了什么

每个

元素都有一个dom方法

var matrix = svgElement.createSVGMatrix();

这是单位矩阵

然后你可以

或者直接

matrix.a = 3;

然后使用它

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

获取转换属性中的第一个元素，例如

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

getItem（0）

获取

translate（1，1）

矩阵，而

getItem（1）

获取

scale（2）

矩阵

---

如果尚未对元素设置转换，则

getItem（0）

将抛出。您可以使用

numberOfItems

检查有多少项，和/或使用

createSVGTransformFromMatrix

添加初始项以将矩阵转换为变换，并使用

appendItem

附加变换。

非常感谢，我现在完全理解了。

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