Как разбить один путь на два пути в 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

и

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

Как рассчитать числа A и B по X и Y nums?

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>