How to get the actual x/y position of an element in SVG with transformations and matrices

后端 未结 1 1921
名媛妹妹
名媛妹妹 2020-12-18 09:37

I need to get the x/y positions of an element that is written like this in SVG:


    

        
相关标签:
1条回答
  • 2020-12-18 10:04

    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.

    0 讨论(0)
提交回复
热议问题