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

时间:2017-01-12 09:29:48

标签: svg

我对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 nums计算A和B数?

1 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;