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

Question

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

<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.com/p/svgweb/) ,标签名称等

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

Answer 1

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

在数学上,所有变换都可以表示为以下形式的3x3变换矩阵:

a   b   e
c   d   f
0   0   1

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

     <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.