使用javascript在对角线上的两个圆之间居中（x和y）svg元素

关于这一点，我已经做了很多研究

[示例1]

当对象是直线时，我可以使用以下公式将其定位在中心位置，而不会出现重大问题：

• targetX：（圆圈3X+圆圈7X）/2-（targetWidth/2）
• 目标：（圆圈3Y+圆圈7Y）/2-（目标灯/2）

然后得到：

rectSvg.setAttribute（“转换”、“转换”（+targetX+）、“+targetY+”）

[示例2]

当圆形元素位于对角线上时，问题就出现了，我需要定位的矩形元素需要相应地旋转。使用上面相同的公式，rect元素永远不会精确地停留在圆之间的中心（它看起来像在中心，但它不是）。在这种情况下，转换属性为：

rectSvg.setAttribute（“transform”、“translate”（+targetX+）、“+targetY+”）旋转（6.2）”


看在上帝的份上，谁能帮我把这个元素斜放在中间

注意：我在服务器上生成svg（node.js上的jsdom库），因此我没有诸如getBoundingClientRects、getBBox等客户端方法

非常感谢您的关注

计算圆的X和Y的代码片段

var circle3X=dom.window.document.getElementById（'circle3'）.getAttribute（“cx”）；
var circle3Y=dom.window.document.getElementById（'circle3'）.getAttribute（“cy”）；


var circle7X=dom.window.document.getElementById（'circle7'）.getAttribute（“cx”）；
var circle7Y=dom.window.document.getElementById（'circle7'）.getAttribute（“cy”）；


var centerX=（圆圈3x+圆圈7x）/2-（矩形宽度/2）；
变量中心=（圆圈3Y+圆圈7Y）/2-（矩形高度/2）


setAttribute（“变换”、“平移”（+centerX+）、“+centerY+”）旋转（16.3）”
据我所知，像圆圈3这样的对象是用轴对齐的矩形描述的，但期望的结果看起来像倾斜的矩形

若要正确找到该矩形的中心，可以使用源矩形的中心，而不是左上角

center1x = top1.x + width1 / 2
center2x = top1.x + height1 / 2
result_center.x = (center1x + center2x) / 2
and similar for y-coordinate

要获得倾斜矩形的角点坐标：

 dist = sqrt((center2y - center1y)^2 + (center2x - center1x)^2)
 ssin = (center2y - center1y) / dist
 ccos = (center2x - center1x) / dist

 corner.x = result_center.x +/- result_width/2 * ccos +/- result_height/2 * ssin
 corner.y = result_center.y -/+ result_width/2 * ssin +/- result_height/2 * ccos    

D第一个表达式上+和-符号的不同组合给出4个角。第二个表达式中的符号应该相应地更改（因此有效的组合是
+-+，+-，-++，-++，-+-
）
您能在代码段中提供您现有的代码吗？嗨，kfedorov91！该问题已按照您的要求进行了编辑。请创建一个。如果我们必须做大量工作来重新创建您的问题，则您获得答案的可能性要小得多。