how to split one path into two paths in svg

断了今生、忘了曾经 提交于 2021-02-19 05:03:13

问题


I'm very new to svg syntax and I want to know how I can split a path into two paths. actually I have something like this:

M Xm Ym ... C Xc1 Yc1 Xc2 Yc2 Xc3 Yc3 (*) C Xd1 Yd1 Xd2 Yd2 Xd3 Yd3 C ...

(*) is where I want to split the path

and I want to convert it to two paths like this:

M Am Bm ... C Ac1 Bc1 Ac2 Bc2 Ac3 Bc3

and

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

How to calculate A and B numbers by X and Y nums?


回答1:


If you can rely on the path commands being absolute (ie capital letters like 'C' rather than 'c'), then it is easy.

M Xm Ym ... C Xc1 Yc1 Xc2 Yc2 Xc3 Yc3 (*) C Xd1 Yd1 Xd2 Yd2 Xd3 Yd3 C ...

would become

M Xm Ym ... C Xc1 Yc1 Xc2 Yc2 Xc3 Yc3

and

M Xc3 Yc3  C Xd1 Yd1 Xd2 Yd2 Xd3 Yd3 C ...

That is, just use the last coordinate pair from the previous path command.

However be aware that, if the path has a fill, splitting it like this may mess up the fill.

If the path has relative path commands (eg. c) - particularly the command before the split - then you will need to do a lot more work. You will need to work out what that last coordinate is in absolute terms before you can use them in the inserted M command.

Example:

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


来源:https://stackoverflow.com/questions/41609438/how-to-split-one-path-into-two-paths-in-svg

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!