Howdy y'all
this is my first post so forgive me if this has been asked before. I have a project where I am receiving svg files with nested g elements. I need to be able to scale those elements programatically with ECMA. The end result is an html page with an embedded svg object with the g element scaled up or down as needed. There is also a top level viewport defined on the SVG that encompasses the entire SVG for screen scaling in the browser. My problem comes when I try to scale the g element in place.

I think I undstand the concept to make this happen, but the implementation is proving a little more difficult. So below is how I am going about it.

find x y coordinates of g element by calling g.getCTM() and using .e and .f as X and Y respectively
so

matrix=g.getCTM()
x=matrix.e
y=matrix.f

find x y coordinates of the viewport element by calling
farthestviewportelement= g.GetFarthestViewportElement

(tried this with svgroot element as well with identical results)

and then calling
matrix = farthestviewportelement.getCTM()
x1=matrix.e
y1=matrix.f

so I end up with

xlocation of g element I'm trying to find = (x+x1)
ylocation of g element I'm trying to find = (y+y1)

create the offset for my transform to the origin as follows
offset.x= xlocation - (xlocation*scalefactor)
offset.y= ylocation -(ylocation*scalefactor)

and then set the new transform on the g element

newtransform= transform(offset.x offset.y) scale(scalefactor) transform(-offset.x -offset.y)

The problem is that this works out to be close to correct, but not exactly right. Each time the g element ends up slightly out of place when scaled. In that it doesn't scale exactly around the center of the object. and of course when I reset the scale to its original value it's also out of place.

Does anyone have any ideas or examples I can look at to get this to work accurately . Close isn't good enough in this situation.

Thanks in advance for any advice.

Mr Johnathan Bravo