SVG：简化去除曲线的路径？

Posted 2023-02-23

【中文标题】SVG：简化去除曲线的路径？

【英文标题】：SVG: simplify path to remove curves?

【发布时间】：2011-09-17 05:23:36

【问题描述】：

我有一个 svg 文件，其中包含带有贝塞尔曲线的复杂路径。 我需要转换此路径数据以将其用于 html 地图区域，所以实际上我只需要坐标（但对于大曲线，在两个端点之间有一些坐标会非常好。

我尝试了 Inkscape 的简化路径功能，但那些路径仍然包含曲线...

有没有什么工具或者公式可以把这些曲线转换成简单的坐标？

也许是另一种在其坐标中不使用曲线的 Inkscape 输出格式？

【问题讨论】：

如果您只需要坐标，您不能使用脚本将它们从 SVG 文件中提取出来吗？

【参考方案1】：

在 Inkscape 中：

选择按节点编辑路径工具(F2) 点击你的路径来选择它 Ctrl + A 选择该路径中的所有节点 单击将新节点插入所选段。重复此操作以尽可能详细地表示曲线的形状。 然后点击制作选定的线段

这些选项位于顶部的工具栏上 - 加号图标和两个方形节点之间的直线对角线。

【参考方案2】：

还有更多技术方法可以简化 SVG 路径 - https://github.com/mattdesl/simplify-path

var path = [ [250, 150], [250, 150], [25, 25], [24, 25], [10, 10] ]
var tolerance = 10
path = simplify(path, tolerance)
//result:
//[ [ 250, 150 ], [ 25, 25 ], [ 10, 10 ] ]

【参考方案3】：

对于自动化，请尝试 Inkscape 中包含的 Flatten Bezier 扩展。描述here。

【讨论】：

这比“制作选定的线段”要好得多，因为它实际上会添加节点来近似曲线。

这是正确的解决方案。它解决了问题中的but for large curves, it would be very nice to have some coordinates 'between' the two end-points 部分。扩展名在 Inkscape 0.92 中的 Extensions > Modify Path > Flatten Beziers... 下。

可以使用“制作选定的线段”来执行此操作。然而，接受的答案完全错过了关键步骤。我已经对其进行了编辑以添加此步骤：在“制作选定的线段”之前使用“将新节点插入选定的线段”