如何将SVGMatrix应用于点数组? [英] How can I apply an SVGMatrix to an array of points?

问题描述

是否有内置库将点向量与SVGMatrix相乘?

Are there built-in libraries to multiply a vector of points by an SVGMatrix?

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

I have an SVG drawing that has been scaled, and I want to annotate that drawing in its original coordinate system with a line that has a fixed width in screen space. (I.e. the line should not change width when zooming in or out, but lines in the image do, of course.) So, my approach is to transform the image inside a , and then take my array of points and apply the same transformation, then create a new path object at the root level using these transformed points.

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

I'm looking for the cleanest way to do this.

推荐答案

svg元素具有创建矩阵对象和点对象的方法.矩阵对象具有用于矩阵运算的方法(例如，乘法，转换，缩放等).点对象具有应用矩阵变换的方法.

The svg element has methods from creating matrix objects and point objects. The matrix object has methods for matrix operations (e.g. multiply, translate, scale, etc). The point object has method to apply matrix transform.

例如...

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);

有关矩阵和点对象的文档可以在...上找到

Documentation for the matrix and point objects can be found at...

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

这篇关于如何将SVGMatrix应用于点数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！