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

标签 javascript matrix svg transform

我需要获取在 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 包装器来显示仅支持基本属性、标签名称等的 SVG (http://code.google.com/p/svgweb/)。

如何根据元素的 x/y 位置计算矩阵和变换?

最佳答案

除了我理解您的问题外,您还需要知道元素在转换后的 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。

关于javascript - 如何通过转换和矩阵获取 SVG 中元素的实际 x/y 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8851023/

相关文章:

python csv文本文件到数组[i,j]

javascript - 如何使用 JavaScript 获取缩放的 SVG 元素的宽度?

javascript - 如何轻松制作 ionic 标签导航

javascript - 通过 JavaScript 或 dll 或 jar 文件获取客户端信息?

Matlab : Dimension reduction

javascript - 旋转元素抛出 SVG 之外

HTML5 内联 SVG 自动裁剪空白

javascript - 为什么单击我的按钮不会隐藏文本区域

javascript - Meteor reactive-var 根据其他选择元素中的选择更新一个选择元素

java - 反向进行矩阵乘法