svgで1つのパスを2つのパスに分割する方法

Question

私はsvgの構文が新しく、パスを2つのパスに分割する方法を知りたいと思います。実際に私はこのような何かを持っている：

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

および

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 ... 

なります。

ただし、パスに塗りつぶしがある場合は、このように分割すると塗りが乱れることがあります。

パスに相対パスコマンド（たとえば、など）がある場合、特に分割前のコマンドの場合は、さらに多くの作業が必要になります。挿入された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>