最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to get the actual xy position of an element in SVG with transformations and matrices - Stack Overflow

programmeradmin1浏览0评论

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?

Share Improve this question asked Jan 13, 2012 at 13:04 F.PF.P 17.8k34 gold badges126 silver badges193 bronze badges 4
  • 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
Add a ment  | 

1 Answer 1

Reset to default 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 bees 236.. + 4.4.. and y point 417.. + 0.

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论