求可计算SVG路径描边轮廓的JavaScript方案（含交叉/孔洞场景）

针对你需要将SVG描边路径转换为视觉完全一致的填充轮廓路径的需求，尤其是处理多贝塞尔交叉、孔洞等复杂场景，以下是几个可行的方案：

推荐JavaScript库与实现代码 #

1. Paper.js（首选） #

Paper.js专门针对矢量图形的几何运算做了深度优化，能精准生成描边的轮廓路径，完美处理交叉曲线、孔洞等场景，且生成的路径与原描边视觉完全匹配。

function convertStrokeToFill(pathData, strokeWidth) {
    // 初始化Paper.js项目
    const project = new paper.Project();
    // 创建路径并设置描边属性
    const originalPath = new paper.Path(pathData);
    originalPath.strokeWidth = strokeWidth;
    originalPath.strokeCap = 'round'; // 对应原SVG的stroke-linecap
    originalPath.strokeJoin = 'round'; // 对应原SVG的stroke-linejoin

    // 生成描边的轮廓路径集合
    const outlinePaths = originalPath.getStrokeOutline();
    // 合并所有轮廓路径为单个路径
    const combinedOutline = new paper.Path(outlinePaths);
    
    // 导出为SVG路径数据
    return combinedOutline.exportSVG({ asString: false }).getAttribute('d');
}

使用时直接调用convertStrokeToFill("M1 1V8", 2)即可得到你示例中的正确轮廓路径，同时支持M1 1Q1 5 9 9M9 1Q9 5 1 9这类交叉曲线，以及带孔洞的路径。

2. SVG.js + 路径偏移工具 #

如果需要更轻量化的方案，可以用SVG.js解析路径，结合polyline-offset生成偏移轮廓：

import { SVG } from '@svgdotjs/svg.js';
import contours from '@svgjs/svg-path-contours';
import offset from 'polyline-offset';

function convertStrokeToFill(pathData, strokeWidth) {
    const svg = SVG();
    // 创建原始路径并配置描边
    const path = svg.path(pathData).stroke({ 
        width: strokeWidth, 
        linecap: 'round', 
        linejoin: 'round' 
    });

    // 获取路径的轮廓点集
    const pathPoints = contours(pathData);
    // 生成偏移后的轮廓（膨胀路径）
    const offsetPoints = pathPoints.map(points => 
        offset(points, strokeWidth / 2, { joinType: 'round' })
    );

    // 合并偏移后的轮廓并导出路径数据
    const finalPath = svg.path(offsetPoints.flat());
    return finalPath.attr('d');
}

避坑说明 #

• 放弃使用Maker.js：该库在复杂路径的几何运算上存在精度缺陷，容易出现孔洞误填充、线段丢失、轮廓截断等问题，不适合你的需求场景。
• 填充规则匹配：生成轮廓路径后，需确保设置fill-rule="nonzero"（或evenodd，根据原需求），保证视觉效果与原描边一致。
• 精度控制：处理贝塞尔曲线时，确保库的采样精度足够（如Paper.js可通过path.flatten(precision)调整），避免轮廓出现锯齿或偏移。

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