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附加转换。

JavaScript中的SVG转换

1 个答案: