Как получить фактическую x / y позицию элемента в SVG с преобразованиями и матрицами

Question

Мне нужно получить координаты x / y элемента, который написан так в 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.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>

Текст элемента переведен 236,532 по оси X, 417,253 по оси Y. Таким образом, точка tspan x становится 236 .. + 4.4 .., а точка y 417 .. + 0.