svg - 如何在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 ...
如何通过 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>