javascript - 如何关闭两条平行二次贝塞尔曲线的路径，其中每条曲线都以 MoveTo 标签开头

Question

我正在使用 VueJS 和 SVG 从头开始​​实现 Sankey 图，我现在面临着关闭从节点到节点的两条平行二次贝塞尔曲线路径的困难。

例如，通过额外的计算，我获得了以下路径

path_1 = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994"

path_2 = "M 35 107.65044814340591 q 162.53571428571428 0 325.07142857142856 64.01601512483994"

路径是这样组合的，以为行，结果不行

<g>
 <template v-for="(point,index) in sankeyNode">
  <template v-for="(pnode, idex) in Object.entries(point)">
   <template v-for="(paths,idx) in pnode[1].paths" v-if="pnode[1].hasOwnProperty('paths')">
    <g style="stroke-width:1;"  stroke="black" fill="pink" :stroke-opacity="0.3">
     <path :d="paths[0]+' '+paths[1]+' Z'" />
    </g>
   </template>
  </template>
 </template>
</g>

这两条路径彼此平行，但我想让它们成为一条靠近的路径，这样我就可以填充组合路径，看起来如下图所示

目前，当路径合并时，它看起来是这样的

我已经尝试使用下面的图片进行说明

现在，当我到达 Path2 末端的“Point A”时，我尝试将 Vertical lineto 添加到“Point B”，这样我就可以从“Point B”形成到“Point E”的二次贝塞尔曲线，并且关闭 CABE 的路径，并通过添加从“点 C 到 E”的垂直线对 Path1 执行相同的操作，然后从点 E 到点 F 形成二次贝塞尔曲线并关闭 GCEF 的路径。

我的尝试没有成功，我正在重新阅读 SVG 文档以找到解决此问题的线索..

请我需要有人给我提供有关如何解决此问题的线索。谢谢

Answer 1

因为两条路径都是从左边开始的，所以我不得不反转第二条路径，让它从右边开始。接下来，我加入了路径的 2d 属性，并将第二条路径的 M 命令替换为 L(行)。我还通过在末尾添加 z 命令来关闭路径。我希望这就是您所需要的。

<svg viewBox="0 0 400 200">

<path d = "M 35 20.39692701664535 q 162.53571428571428 0 325.07142857142856 64.01601512483994
           L360.07142857142856,171.66646326824585Q197.53571428571428,107.65044814340591 35,107.65044814340591
           z"/>

</svg>