SVG路径和变形



我有一些理论问题。假设我在svg中有两条路径。每个都有不同数量的点。一个有4条bsamzier曲线,另一个有3条。

我想做的是把一个变成另一个。现在,我知道他们必须有完全相同的结构和相同数量的点来做到这一点。

所以,问题是,我可以添加"虚拟点"到他们的路径,以获得相同的结构和点数,而不改变物体的形状?

例如,在其中一条路径中取一个点,然后在它后面加上相同的点来增加点的数量。或者在两条路径上都画一条bsamzier曲线假装成一条直线而不是曲线。这会改变对象吗?如果我在x=1 y=1和x=4 y=4上有点,用这种形式能把bsamzier曲线画成直线吗?(M1 1C1 1 4 4 4 4)

明白了。使用控制点在同一条线上的任何地方作为坐标,将bsamzier转换成一条线,如果你使用相同的点作为控制点,开始和结束坐标,你可以将曲线转换成一个点。在path中添加更多这样的点并不会改变对象的外观,只是在路径中添加了更多的数据。

http://www.petercollingridge.co.uk/book/export/html/560

在三次曲线下,您可以按照所描述的方式对齐点以获得所需的结果

我有一个简单的使用d3插件动画svg路径支持不同数量的点,它也动画只有路径的部分不同于原始路径,而不是整个路径。7kb缩小:https://pratyushcrd.github.io/d3-path-morphing/

最新更新