如何在svg中将一条路径分成两条路径 [英] how to split one path into two paths in svg
问题描述
我对 svg 语法很陌生,我想知道如何将一条路径分成两条路径.实际上我有这样的事情:
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
和
M An Bn C Ad1 Bd1 Ad2 Bd2 Ad3 Bd3 ...
如何通过 X 和 Y 数计算 A 和 B 数?
How to calculate A and B numbers by X and Y nums?
推荐答案
如果您可以依赖绝对路径命令(即大写字母,如 'C' 而不是 'c'),那么这很容易.
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 ...
会变成
M Xm Ym ... C Xc1 Yc1 Xc2 Yc2 Xc3 Yc3
和
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.
如果路径有相对路径命令(例如c
)——尤其是分割前的命令——那么你需要做更多的工作.您需要先计算出最后一个坐标的绝对值,然后才能在插入的 M
命令中使用它们.
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.
示例:
<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>
这篇关于如何在svg中将一条路径分成两条路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!