如何使用变换和矩阵获取SVG中元素的实际x / y位置

本文介绍了如何使用变换和矩阵获取SVG中元素的实际x / y位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我需要获取SVG中这样写的元素的x / y位置：

I need to get the x/y positions of an element that is written like this in SVG:

<g transform="scale(10,10)" id="g6558"> <text transform="matrix(1,0,0,-1,236.532,417.253)" id="text6560"> <tspan x="0 4.448" y="0" id="tspan6562">10</tspan> </text> </g>

如何获得 tspan 这种情况下的元素？我必须手动计算它们，因为我不能使用 getBBox（）或其他本机函数，因为我使用Flash包装器来显示SVG（http：// code.google/p/svgweb/），它只支持基本属性，标记名称等。

How do I get the current position of the tspan element in this case? I have to manually calculate them as I can't use getBBox() or other native functions because I'm using a Flash-wrapper to display the SVG (code.google/p/svgweb/) which only supports basic attributes, tag names etc.

如何在x / y位置上计算矩阵和变换元素？

How are the matrices and transformations caluclated on the x/y position of the element?

推荐答案

除了我理解你的问题，你需要知道一个元素的x和y坐标在转换之后。

As well as i understood your problem, you need to know the x and y co-ordinates of an element, after it is transformed.

在数学上，所有转换都可以表示为以下形式的3x3转换矩阵：

Mathematically, all transformations can be represented as 3x3 transformation matrices of the following form:

a b e c d f 0 0 1

由于在上述3x3矩阵中仅使用了六个值，因此转换矩阵也表示为向量： [abcdef] 。 a和d分别负责x和y的缩放，而e和f分别给出x和y中的平移轴。 所以在你的代码中

Since only six values are used in the above 3x3 matrix, a transformation matrix is also expressed as a vector: [a b c d e f]. a and d responsible for scaling in x and y respectively, whereas e and f gives you the translated axis in the x and y respectively. So In your code which is

<text transform="matrix(1,0,0,-1,236.532,417.253)" id="text6560"> <tspan x="0 4.448" y="0" id="tspan6562">10</tspan> </text>

元素文本在y轴的x轴417.253中被翻译为236.532。 所以tspan x点变为236 .. + 4.4 ..和y点417 .. + 0。

Element text is translated 236.532 in the x-axis 417.253 in the y-axis. So tspan x point becomes 236.. + 4.4.. and y point 417.. + 0.