javascript - 如何将 SVGMatrix 应用于点数组?

标签 javascript matrix svg transform fixed-width

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

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

我正在寻找最干净的方法来做到这一点。

最佳答案

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

关于javascript - 如何将 SVGMatrix 应用于点数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33579187/

相关文章:

matlab - 如何有效地用查找替换函数?

javascript - 根据 React 中的状态缓存计算值的惯用方法?

html - 将 clipPath 应用于带有变换的图像元素时出现问题

javascript:读取纯 html 字符串并使用 DOMparser 更改链接路径

javascript - 如何创建日期为 ("23.03.2010"的对象)

c++ - 使用链表转置稀疏矩阵(遍历问题)

n X n 矩阵的行列式代码

javascript - 动态创建的 SVG 元素不显示

javascript - 我如何从当前日期的数组中获取 7 个连续的日期(数组中的日期不同)?

javascript - 创建与 JavaScript 一起使用的数据库