如何在svg中將一條路徑分成兩條路徑

Question

我對svg語法很陌生，我想知道如何將路徑分成兩條路徑。其實我有這樣的事情：

M Xm Ym ... C Xc1 Yc1 Xc2 Yc2 Xc3 Yc3 (*) C Xd1 Yd1 Xd2 Yd2 Xd3 Yd3 C ...

（*）是我想要拆分的路徑

，我想將它轉化成兩條路徑是這樣的：

M Am Bm ... C Ac1 Bc1 Ac2 Bc2 Ac3 Bc3

and

M An Bn C Ad1 Bd1 Ad2 Bd2 Ad3 Bd3 ...

如何計算X和Y數量的A和B數字？

Answer 1

如果您可以依賴路徑命令爲絕對路徑（即大寫字母，如'C'而不是'c'），那麼很容易。

M Xm Ym ... C Xc1 Yc1 Xc2 Yc2 Xc3 Yc3 (*) C Xd1 Yd1 Xd2 Yd2 Xd3 Yd3 C ... 

將成爲

M Xm Ym ... C Xc1 Yc1 Xc2 Yc2 Xc3 Yc3 

和

M Xc3 Yc3 C Xd1 Yd1 Xd2 Yd2 Xd3 Yd3 C ... 

也就是說，只要使用上次從原來的路徑命令座標對。

但是請注意，如果路徑有填充，像這樣拆分可能會弄亂填充。

如果路徑具有相對路徑命令（例如c） - 特別是拆分前的命令 - 那麼您將需要做更多的工作。在插入M命令之前，您需要先確定最後一個座標的絕對值。

例子：

<svg width="200" height="200" viewBox="0 0 20 20"> 
 
    <path transform="translate(10,10)" 
 
     d="M -10,0 
 
      C -10,-5.5 -5.5,-10 0,-10 
 
      C 5.5,-10 10,-5.5 10,0"/> 
 
</svg> 
 

 
<svg width="200" height="200" viewBox="0 0 20 20"> 
 
    <path transform="translate(10,10)" fill="red" 
 
     d="M -10,0 
 
      C -10,-5.5 -5.5,-10 0,-10"/> 
 
    <path transform="translate(10,10)" fill="green" 
 
     d="M 0,-10 
 
      C 5.5,-10 10,-5.5 10,0"/> 
 
</svg>