如何通过使用react或javascript动态计算元素的顶部和左侧位置来相对于两个元素放置元素？

我有一个

svg

、内容框

div

和弹出对话框

div

元素。我想将

svg

（它是一个箭头，位于

div

中）这样

svg

顶部位于内容框的右中央，左侧位于弹出对话框的中央

如下图所示。

我想找到

svg

元素和旋转的顶部和左侧位置，这样在分辨率改变时它就不会错位

我尝试了下面的方法，在这里我得到了内容框的顶部和左侧位置以及弹出对话框…我还想计算svg的长度，稍后用于设置svg的宽度和高度

以下计算不正确…svg根据分辨率显示在不同的位置。我希望它保持不变，无论决议是什么

positioning = () => {
    const alignment = 'right';
    const popup_dialog_element = document.querySelector("selector to get the popup dialog);
    const context_box_element = document.querySelector("some selector");
    const popup_dialog_rect = popup_dialog_element.getBoundingClientRect();
    const content_box_rect = content_box_element.getBoundingClientRect();
    const start_position = this.get_position(content_box_rect, alignment);
    const end_position = this.get_position(popup_dialog_rect);
    const length = Math.hypot(end_position.x-start_position.x, end_position.y-start_position.y);
    const center_x = (start_position.x + end_position.x) / 2;
    const center_y = (start_position.y + end_position.y) / 2;
    const rotation = this.get_angle_of_rotation(center_x, center_y, end_position.x, end_position.y);
    svg_element.style.transform = `rotate(${rotation})`;
    svg_element.style.top = start_position.y + 'px';
    svg_element.style.left = end_position.x + 'px';
    svg_element.style.width = length + 'px';
    svg_element.style.height = length + 'px';
}

get_angle_of_rotation = (cx,cy,x,y) => {
    const dy = y - center_y;
    const dx = x - center_x;
    let theta = Math.atan2(dy, dx);
    theta *= 180 / Math.PI;
    if (theta < 0) theta = 360 + theta;
    return theta + 'deg';
}

get_position = (rect, alignment) => {
    switch(alignment) {
        case 'left':
            return {x: rect.left, y: rect.top + (rect.height / 2)};
        case 'top':
            return {x: rect.left + (rect.width / 2) , y: rect.top};
        case 'bottom':
            return {x: rect.left + (rect.width / 2), y: rect.bottom};
        case 'right':
            return {x: rect.right, y: rect.top + (rect.height / 2)};
        default:
            return {x: rect.left + (rect.width / 2), y: rect.top + (rect.height / 2)};
    }
}

positioning=（）=>{
常量对齐='右'；
const popup_dialog_element=document.querySelector（“获取弹出对话框的选择器”）；
const context_box_element=document.querySelector（“某些选择器”）；
const popup_dialog_rect=popup_dialog_元素。getBoundingClientRect（）；
const content\u box\u rect=content\u box\u元素。getBoundingClientRect（）；
const start\u position=此。获取位置（内容框，对齐）；
const end_position=此。获取位置（弹出对话框）；
常量长度=数学形波（结束位置。x-开始位置。x，结束位置。y-开始位置。y）；
常数中心x=（起始位置x+结束位置x）/2；
常数中心y=（起始位置y+结束位置y）/2；
常量旋转=此。获取旋转的角度（中心x，中心y，结束位置.x，结束位置.y）；
svg_element.style.transform=`rotate（${rotation}）`；
svg_element.style.top=start_position.y+'px'；
svg_element.style.left=end_position.x+'px'；
svg_element.style.width=长度+px；
svg_element.style.height=长度+px；
}
获取旋转角度=（cx，cy，x，y）=>{
常数dy=y-中心y；
常数dx=x-中心x；
设θ=Math.atan2（dy，dx）；
θ*=180/Math.PI；
如果（θ<0）θ=360+θ；
返回θ+度；
}
获取位置=（矩形，对齐）=>{
开关（校准）{
案例“左”：
返回{x:rect.left，y:rect.top+（rect.height/2）}；
案例“顶部”：
返回{x:rect.left+（rect.width/2），y:rect.top}；
案例“底部”：
返回{x:rect.left+（rect.width/2），y:rect.bottom}；
案例“正确”：
返回{x:rect.right，y:rect.top+（rect.height/2）}；
违约：
返回{x:rect.left+（rect.width/2），y:rect.top+（rect.height/2）}；
}
}

---

有人能帮我解决这个问题吗？我希望svg元素在内容框中心旁边正确对齐，箭头应该在弹出对话框的中心结束。或者让我知道如何将div定位在中间，如图所示。谢谢。

代码笔或可分叉代码将非常有帮助。您是否在

上调用这些方法>调整大小

？我在componentdidupdate钩子中调用这些。。。