SVG弯曲区域路径（MC） - 启动时结束（切割）

Question

我有此SVG路径：

<svg viewBox="0 0 500 500">
  <path fill="red" d="
        M 326 147
        C 329 135 345 130 355 137
        C 376 150 385 188 362 197
        C 339 206 318 170 326 147
        M 381 222
        C 418 214 408 157 385 127   
        C 370 108 340 96 326 115
        C 296 154 334 233 381 222
    ">
  </path>
  <g>
    <path fill="blue" d="M 326 151 A 4 4 0 1 1 326.00399999933336 150.99999800000018 Z"></path>
    <path fill="blue" d="M 355 141 A 4 4 0 1 1 355.00399999933336 140.99999800000018 Z"></path>
    <path fill="blue" d="M 362 203.54315907595438 A 5.999822352380809 5.999822352380809 0 1 1 362.0059998213524 203.54315607604343 Z"></path>
    <path fill="blue" d="M 326 119.76249999999999 A 4 4 0 1 1 326.00399999933336 119.76249800000015 Z"></path>
    <path fill="blue" d="M 385 132 A 4 4 0 1 1 385.00399999933336 131.99999800000018 Z"></path>
    <path fill="blue" d="M 381 228.81468927464363 A 5.9996841892833 5.9996841892833 0 1 1 381.0059996831893 228.81468627480177 Z"></path>
  </g>
</svg>

Live Demo： https://jsfiddle.net/blacklabel/blacklabel/coa9hd7g/

我正在尝试获得从A1和A2开始的SVG，并在C1和C2上结束，如下图所示：

有任何有关如何实现它的线索吗？提前致谢！

Answer 1

您可以从每个组中删除最后一个bezier，用L线L更改中间的M命令，然后用z这样的路径关闭路径：

svg{width:90vh}

<svg viewBox="300 100 150 150">
  <path fill="red" d="
        M 326 147
        C 329 135 345 130 355 137
        C 376 150 385 188 362 197
        L 381 222
        C 418 214 408 157 385 127   
        C 370 108 340 96 326 115
        z
    ">
  </path>