小编Wen*_*GTX的帖子

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

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

<svg>
    <circle class="spot" id="au" cx="1680" cy="700" r="0"></circle>
    <circle class="spot" id="sl" cx="1425" cy="525" r="0"></circle>

    <line id="line1" stroke-width="2" stroke="red"/>
</svg>
Run Code Online (Sandbox Code Playgroud)

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

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);
}
Run Code Online (Sandbox Code Playgroud)

javascript svg bezier curve

4
推荐指数
1
解决办法
4681
查看次数

标签 统计

bezier ×1

curve ×1

javascript ×1

svg ×1