javascript - 如何使用转换和矩阵获取 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() 或其他 native 函数，因为我使用 Flash-wrapper 来显示 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>

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