如何通过转换和矩阵获取 SVG 中元素的实际 x/y 位置答案

【问题标题】：How to get the actual x/y position of an element in SVG with transformations and matrices如何通过转换和矩阵获取 SVG 中元素的实际 x/y 位置
【发布时间】：2012-02-09 16:23:45
【问题描述】：

我需要获取在 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 位置计算矩阵和变换？

【问题讨论】：

只是一个问题。你评估过 RaphaelJS 吗？对 SVG 的支持很棒，您可以免费获得 getBBox() :-)
图形已经创建，我只想显示它们 - 不以任何方式创建或编辑它们。当时使用 SVGWeb 非常简单，因为它使我能够支持大多数浏览器，并且由于使用了 flash，我仍然拥有完全相同的图形显示......
您可以访问哪些值？你说的是基本属性，那包括transform属性吗？
是 - 任何属性。但是当我访问它时，我只是返回了字符串 matrix(...) - 但我不知道如何计算实际的 x/y 位置......

标签： javascript matrix svg transform

【解决方案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.

【讨论】：

这是一个非常好的解释。我会继续尝试在我的程序中使用它。你是救生员！ :)