5

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.com/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?

F.P
  • 17,421
  • 34
  • 123
  • 189
  • Just a question. Have you evaluated RaphaelJS ? Support for SVG is great, and you get `getBBox()` for free :-) – Grooveek Jan 13 '12 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 Jan 13 '12 at 13:09
  • What values can you access? You say basic attributes, does that include the `transform` attribute? – bennedich Jan 15 '12 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 Jan 16 '12 at 07:48

1 Answers1

8

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 becomes 236.. + 4.4.. and y point 417.. + 0.

Mujtaba Haider
  • 1,650
  • 2
  • 19
  • 29
  • That's a really good explanation. I will go forth and try to use it in my program. You're a life-saver! :) – F.P Feb 08 '12 at 10:05