0

I am new to SVG. I have a svg image, i have applied a transform matrix for a <g> tag. Now I want to calculate <g> tag width and height. on page load i can calculate width and height using getBBox() or getBoundingClientRec() functions. But when i am resizing the window i am changing matrix values, Before updating matrix values how can i calculate <g> tag width and height.

-- getBBox() and getBoundingClientRec() returns width and height based on matrix values.

example: On page load: 

<g id="xyz" transform="matrix(1,0,0,1,10,10)"></g>

When resizing the window i am calling a method which calculates matrix values. Note: Matrix values are calculated not yet updated I need to center the image to the browser window on resizing. I am subtracting window width and image width divided by 2 and i am applying that value for matrix.e i., "x" value. example: new matrix values are [1.2,0,0,1.2,x,10]

For centering map i need to know width and height of <g> by using calculated matrix values i.e., [1.2,0,0,1.2,x,10]

user2083041
  • 513
  • 1
  • 8
  • 32

1 Answers1

1

Wrap the transformed group with another <g> and call getBBox() on that.

However why not describe the original problem you are trying to achieve? Since you are new to SVG, there is a chance you are approaching your problem the wrong way. Maybe we can suggest a better solution than trying to manipulate matrixes yourself.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Paul thanks for your suggestion. I will explain my problem in short. I need to fit svg image on resizing window and center it. I am using svg-pan-zoom.js. And i am customizing it. On resizing i need to calculate matrix values to center it and fit in window. For centering i need to know svg width – user2083041 Feb 25 '16 at 09:11
  • Well, you probably want to modify the svg-pan-zoom code to have it work properly. First I would suggest you add your support to this bug report, so it gets fixed more quickly: https://github.com/ariutta/svg-pan-zoom/issues/185. – Paul LeBeau Feb 25 '16 at 09:47