Как закрыть путь двух параллельных квадратичных кривых Безье, где каждая начинается с тега MoveTo
Я реализую диаграмму Sankey с нуля с использованием VueJS и SVG, теперь я столкнулся с трудностями закрытия путей двух параллельных квадратичных кривых Безье от узлов к узлам.
Где например путем дополнительных вычислений я получил следующие пути
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>
Эти два пути параллельны друг другу, но я хотел бы сделать их близкими, чтобы я мог заполнить объединенные пути и выглядел бы так, как показано на рисунке ниже
В настоящее время при объединении путей это выглядит следующим образом
Я попробовал следующее с использованием изображения ниже для иллюстрации
Теперь, когда я добрался до" точки А", которая является концом пути 2, я попытался добавить вертикальную линию в" точку В", чтобы из" точки в "я мог сформировать квадратичную кривую Безье в" точку Е "и закрыть путь Кейба, а также сделать то же самое для Пути 1, добавив вертикальную линию из" точки С В Е", а затем из точки Е сформировал квадратичную кривую Безье в точку F и закрыть путь GCEF.
Моя попытка не сработала, и я перечитываю документы SVG, чтобы найти ключ к тому, как решить эту проблему..
Пожалуйста, мне нужно, чтобы кто-то дал мне подсказку о том, как решить эту проблему. Спасибо
Ответы - Как закрыть путь двух параллельных квадратичных кривых Безье, где каждая начинается с тега MoveTo / How to close path of two parallel quadratic Bezier curves where each starts with a MoveTo tag

06.01.2020 01:02:35
Поскольку оба пути начинаются слева, мне пришлось повернуть второй путь так, чтобы он начинался справа. Затем я присоединил атрибуты 2 d для путей и заменил команду M второго пути командой L (line). Кроме того, я закрыл путь, добавив команду 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>
