three lines with the same starting point are drawn, but the starting points are not together

[darkfiredarkhalo]

 const startPath1 = "M 20 720 L 100 100"; // 上路开始阶段
  const startPath2 = "M 20 720 L 200 200"; // 中路前半段
  const startPath3 = "M 20 720 L 500 100"; // 下路开始阶段
  useEffect(() => {
    drawDemo();
  }, []);
  const drawDemo = () => {
    const demoDraw = SVG().addTo(".demoBox").size(750, 600);
    demoDraw.path(startPath1).attr({ fill: "none", stroke: "red" });
    demoDraw.path(startPath2).attr({ fill: "none", stroke: "green" });
    demoDraw.path(startPath3).attr({ fill: "none", stroke: "blue" });
  };

result:

[Fuzzyma]

Please recreate this in a codepen or jsfiddle

[Fuzzyma]

Your svg is simply not big enough to hold the whole line