我对 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
and
M An Bn C Ad1 Bd1 Ad2 Bd2 Ad3 Bd3 ...
如何通过X和Y数字计算A和B数字？
如果您可以依赖绝对路径命令（即像“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
and
M Xc3 Yc3 C Xd1 Yd1 Xd2 Yd2 Xd3 Yd3 C ...
也就是说，只需使用上一个路径命令中的最后一个坐标对。
但请注意，如果路径有填充，像这样分割它可能会弄乱填充。
如果路径有相对路径命令（例如c) - 特别是分割之前的命令 - 那么你将需要做更多的工作。您需要先计算出最后一个坐标的绝对值，然后才能在插入的内容中使用它们M命令。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
