SVG 曲线区域路径 (M C) - 不要在开始处结束（剪切）

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>

现场演示：https://jsfiddle.net/BlackLabel/coa9hd7g/

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

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

Answer 1

您可以从每个组中删除最后一个贝塞尔曲线，将中间的 M 命令更改为一行 L，并使用 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>

SVG 曲线区域路径 (M C) - 不要在开始处结束（剪切）

SVG curved area path (M C) - don't end at start (cut)

svg

path