javascript - JavaScript 中的 SVG 转换

Question

SVG 转换可以通过 JavaScript 通过设置它们相应的属性 setAttribute("transform", "translate(x,y)") 来完成，但也应该可以通过 pure 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附加转换。