svg的path画出来的路径太糙了，怎么修改才能让其相对光滑点？

Question

最近尝试自己弄一个流图组件，然而画出来的连线太糙了，找老司机指点下，该怎么优化。

<!-- 绘制连线 -->
<g>
  <g v-for="(line, i) in lines" :key="i">
    <path :d="drawLine(line)" fill="none" marker-end="url(#arrow)" stroke-width="2px" />
  </g>
</g>

drawLine(line){
  let node1 = this.nodes[line[0]], node2 = this.nodes[line[1]];
  const MARGIN = 50;
  const NODE_LINE_GAP = 8; //当细线时为8，粗线时为16
  let startX = node1.x+node1.width;
  let startY = node1.y+(node1.height/2);
  let targetX = node2.x-NODE_LINE_GAP;
  let targetY = node2.y+(node2.height/2);
  let x1 = startX+MARGIN;
  let x2 = targetX-MARGIN;
  let y1 = startY;
  let y2 = targetY;
  let x3 = (x1+x2)/2;
  let y3 = y1;
  let x4 = (x1+x2)/2;
  let y4 = (y1+y2)/2;
  //(startX,startY)到(x1,y1)为直线,(x2,y2)到(targetX,targetY)为直线，中间为二次平滑贝塞尔曲线
  return `M ${startX},${startY} L ${x1},${y1} Q ${x3},${y3} ${x4},${y4} T ${x2},${y2} L ${targetX},${targetY}`;
}

连线的算法或path元素的样式该怎么优化好？

Answer 1

关于线的末端锐角问题，设置stroke-linecap="round"解决。
关于线的连线过程锐角问题，设置stroke-linejoin="round"解决。