There is an error in the zooming of svg graphics in JS operation.

problem description

I am developing an editor web version of svg. At present, the content of zooming is to find that there will be errors in zooming when JS operates svg.
the principle is that each graphic has a bounding box, and then I stretch the bounding box with the width or height of the stretched frame to remove the width or height before stretching, to get how much this magnification is stretched, and then assign the magnification to the scale (xQuery) attribute of svg

.

the environmental background of the problems and what methods you have tried

uses Google browser, currently does not consider the compatibility of other browsers, has tried to adjust the zoom ratio is still useless

related codes

/ / Please paste the code text below (do not replace the code with pictures)
zx = sr.getBBox (). Width/d.width, zy = sr.getBBox (). Height/d.height;// zoom
/ / d is the frame before stretching
stD1.setAttribute ("transform","translate (" + (stD1.getBBox (). X+stD1.getBBox () .width)

)
                        +","+(stD1.getBBox().y+stD1.getBBox().height)+")"
                        +" scale("+zsx+","+zsy+") "
                        +"translate("+-1*(stD1.getBBox().x+stD1.getBBox().width)+","
                        +-1*(stD1.getBBox().y+stD1.getBBox().height)+")");

/ / set the scale value for the specified SVG drawing

what result do you expect? What is the error message actually seen?

I thought I would scale as much as I stretched. It seems that the distance between the graphics inside and my outer frame is constant, but at present, after I stretch the outer frame, the width and height of the inside graphics are scaled proportionally, but it will become smaller and smaller, causing the graphics not to be in the relative position of the outer frame

.
Apr.06,2021
Menu