JavaScript 中的 SVG 转换

【问题标题】：SVG Transformations in JavaScriptJavaScript 中的 SVG 转换
【发布时间】：2020-04-16 15:24:59
【问题描述】：

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) 实际上做了什么？

【问题讨论】：

标签： javascript svg translation transform transformation

【解决方案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 添加转换。

【讨论】：

非常感谢，我现在完全明白了。