Fabric.js加载多路径SVG后导出线条断裂问题及解决方案

我将DXF格式转换而来的多路径SVG文件，通过fabric.loadSVGFromString加载到画布，再经fabric.util.groupSVGElements处理，随后用canvas.toSVG()导出画布内容。但导出的SVG在浏览器或Inkscape中显示线条断裂，各路径呈独立线段，在圆弧或线条连接处放大后尤为明显。由于后续需将处理后的内容转回DXF格式，加载为图片的方案不可行。

解决方案 #

这是精度问题，Fabric默认采用较低精度以减少数据及内存占用，只需在代码中添加以下配置即可解决：

fabric.Object.NUM_FRACTION_DIGITS = 8;

数值越大，精度越高。

复现步骤 #

• 点击“ADD SVG to canvas”按钮，将SVG加载到红色边框画布
• 点击“Display Exported Canvas”按钮，通过toSVG()导出红色边框画布内容并加载到蓝色边框div中

结果对比 #

• 预期结果：SVG线条保持原始完整状态
• 实际结果：SVG线条断裂，放大后可见

内容的提问来源于stack exchange，提问作者IoanaB