Calculating Svg <g> tag width

570 Views Asked by At

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]

1

There are 1 best solutions below

2
On

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.