如何在SVG中将一个路径拆分为两个路径

Question

如何在SVG中将一个路径拆分为两个路径

svg

6

我对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号码?

- Kamyar Mirzavaziri

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

如果您可以依赖路径命令是绝对的（即使用大写字母如'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 ...

也就是说，只需使用前一个路径命令的最后一组坐标。

但要注意，如果路径有填充，这样拆分可能会破坏填充效果。

如果路径具有相对路径命令（例如），特别是在分割之前的命令，那么您需要做更多的工作。您需要计算出最后一个坐标的绝对位置，然后才能在插入的命令中使用它们。

示例：

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