如何在两点之间创建弯曲的SVG路径？

我需要在两个圆的中心之间画一条对称的曲线.

这是我到目前为止编写的代码.元素应替换为弯曲路径.

function drawNow() {
    let point1X = document.getElementById("au").getAttribute("cx");
    let point1Y = document.getElementById("au").getAttribute("cy");
    let point2X = document.getElementById("sl").getAttribute("cx");
    let point2Y = document.getElementById("sl").getAttribute("cy");

    let line1 = document.getElementById("line1");
    line1.setAttribute("x1", point1X);
    line1.setAttribute("y1", point1Y);
    line1.setAttribute("x2", point2X);
    line1.setAttribute("y2", point2Y);
}

Andrew Morto.. 14

SVG二次曲线可能就足够了.要绘制它,您需要终点(您拥有)和一个确定曲线的控制点.

为了形成对称曲线,控制点需要位于端点之间的直线的垂直平分线上.一点点数学就能找到它.

所以,从两点来看......

你可以去

使用代码

    
    
    
    


    
    Click

如果您希望曲线走另一条路,请更改符号offset.

不需要显示控制点 - 这样就可以看到它的位置,并说明曲线没有经过它.

_{注意:使用atan2的替代方法是计算点之间的线的梯度的负倒数,但是对于梯度为零的情况,这是非常适合的,并且当梯度接近零时可能产生非常不准确的结果.}

SVG二次曲线可能就足够了.要绘制它,您需要终点(您拥有)和一个确定曲线的控制点.

为了形成对称曲线,控制点需要位于端点之间的直线的垂直平分线上.一点点数学就能找到它.

所以,从两点来看......

你可以去

使用代码

    
    
    
    


    
    Click

如果您希望曲线走另一条路,请更改符号offset.

不需要显示控制点 - 这样就可以看到它的位置,并说明曲线没有经过它.

_{注意:使用atan2的替代方法是计算点之间的线的梯度的负倒数,但是对于梯度为零的情况,这是非常适合的,并且当梯度接近零时可能产生非常不准确的结果.}