如何将 SVGMatrix 应用于点数组？

Question

是否有内置库可以将点向量乘以 SVGMatrix？

我有一个已缩放的 SVG 绘图，我想在其原始坐标系中用一条在屏幕上具有固定宽度的线来注释该绘图 space。（即，放大或缩小时线条不应改变宽度，但图像中的线条当然会改变。）因此，我的方法是在 a 内变换图像，然后采用我的点数组并应用相同的变换，然后使用这些转换点在根级别创建一个新的路径对象。

我正在寻找执行此操作的最干净的方法。

Answer 1

svg 元素具有创建矩阵对象和点对象的方法。矩阵对象具有用于矩阵运算的方法（例如乘法、平移、缩放等）。点对象有应用矩阵变换的方法。

例如...

var svg = document.getElementById("mySvg");
var matrix1 = svg.createSVGMatrix();
var matrix2 = matrix1.translate(2, 3);
var point1 = svg.createSVGPoint();
point1.x = 1;
point1.y = 1;
var point2 = point1.matrixTransform(matrix2);

矩阵和点对象的文档可以在...

http://www.w3.org/TR/SVG/single-page.html#coords-InterfaceSVGPoint http://www.w3.org/TR/SVG/single-page.html#coords-InterfaceSVGMatrix

如何将 SVGMatrix 应用于点数组？

How can I apply an SVGMatrix to an array of points?

javascript

matrix

svg

transform

fixed-width