I need to get the x/y positions of an element that is written like this in 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>

How do I get the current position of the tspan element in this case? I have to manually calculate them as I can't use getBBox() or other native functions because I'm using a Flash-wrapper to display the SVG (/) which only supports basic attributes, tag names etc.

How are the matrices and transformations caluclated on the x/y position of the element?

I need to get the x/y positions of an element that is written like this in 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>

How do I get the current position of the tspan element in this case? I have to manually calculate them as I can't use getBBox() or other native functions because I'm using a Flash-wrapper to display the SVG (http://code.google./p/svgweb/) which only supports basic attributes, tag names etc.

How are the matrices and transformations caluclated on the x/y position of the element?

• javascript
• matrix
• svg
• transform

• Just a question. Have you evaluated RaphaelJS ? Support for SVG is great, and you get getBBox() for free :-) – Grooveek Commented Jan 13, 2012 at 13:05
• The graphics are already created, I just want to display them - not create or edit them in any way. Using SVGWeb was quite neat at the time because it enabled me to support most browsers and still have the exact same display of the graphics thanks to flash... – F.P Commented Jan 13, 2012 at 13:09
• What values can you access? You say basic attributes, does that include the transform attribute? – bennedich Commented Jan 15, 2012 at 13:15
• Yes - any attribute. But when I access that, I just get the string matrix(...) returned - but I don't know how to calculate the actual x/y positions from that... – F.P Commented Jan 16, 2012 at 7:48

1 Answer 1

As well as i understood your problem, you need to know the x and y co-ordinates of an element, after it is transformed.

Mathematically, all transformations can be represented as 3x3 transformation matrices of the following form:

a   b   e
c   d   f
0   0   1

Since only six values are used in the above 3x3 matrix, a transformation matrix is also expressed as a vector: [a b c d e f]. a and d responsible for scaling in x and y respectively, whereas e and f gives you the translated axis in the x and y respectively. So In your code which is

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

Element text is translated 236.532 in the x-axis 417.253 in the y-axis. So tspan x point bees 236.. + 4.4.. and y point 417.. + 0.