如何将SVGMatrix应用于点阵列?

时间:2015-11-07 04:38:54

标签: javascript matrix svg transform fixed-width

是否有内置库可以将SVGMatrix的点矢量相乘?

我有一个已经缩放的SVG绘图,我想在其原始坐标系中使用在屏幕空间中具有固定宽度的线来标注该绘图。 (即当放大或缩小时线不应改变宽度,但当然,图像中的线也是如此。)因此,我的方法是将图像转换为a,然后取出我的点阵并应用相同的转换,然后使用这些转换后的点在根级别创建一个新的路径对象。

我正在寻找最干净的方法。

1 个答案:

答案 0 :(得分:2)

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