如何解决paper.js按bounds导出SVG时Illustrator显示全图层对象问题

paper.project.exportSVG()的bounds参数不会实际删除指定范围外的元素，仅会给导出的SVG根节点添加viewBox属性，通过视口规则限制浏览器的显示范围。浏览器渲染时会严格遵循viewBox规则只展示可视区域内容，但Illustrator打开SVG时会加载文件内存储的所有矢量路径，不会默认按照viewBox裁剪视口外的对象，因此会出现浏览器显示正常、AI打开能看到全量图层内容的差异。

根据需求二选一即可：

方案1：导出前过滤范围外元素（导出文件无冗余内容，兼容性最好） #

核心逻辑是导出前临时隐藏和目标导出范围无交集的元素，导出完成后再恢复元素显示状态，不会改动原有画布内容：

const boundsArtboard = new Rectangle({x:10,y:10, width:100, height:100});
const tempHidden = [];

// 遍历所有需要导出的元素
paper.project.getItems({
    match: item => item.exportable !== false && item.isInserted()
}).forEach(item => {
    // 隐藏和导出范围完全不相交的元素
    if (!item.bounds.intersects(boundsArtboard)) {
        item.visible = false;
        tempHidden.push(item);
    }
});

// 执行导出，无需再传入bounds参数
const svg = paper.project.exportSVG({
    asString: true,
    precision: 5
});

// 恢复所有被临时隐藏的元素
tempHidden.forEach(item => {
    item.visible = true;
});

如果需要更精细的裁剪效果（比如跨边界的元素只保留范围内的部分），可以对和bounds相交的元素调用item.intersect(boundsArtboard.toPath())生成裁剪后的路径临时替换原元素，导出完成后还原即可。

方案2：给SVG追加内置裁剪规则（无需改动画布元素） #

如果不想操作现有画布的元素状态，可以在导出的SVG字符串中追加全局裁剪路径，Illustrator可以识别该裁剪规则，不会显示范围外的内容：

const boundsArtboard = new Rectangle({x:10,y:10, width:100, height:100});
let svg = paper.project.exportSVG({
    asString: true,
    precision: 5,
    bounds: boundsArtboard
});

// 定义和导出范围一致的裁剪路径
const clipContent = `
<defs>
  <clipPath id="export-clip">
    <rect x="${boundsArtboard.x}" y="${boundsArtboard.y}" width="${boundsArtboard.width}" height="${boundsArtboard.height}"/>
  </clipPath>
</defs>
`;

// 给SVG根节点添加裁剪属性，插入裁剪定义
svg = svg.replace('<svg ', '<svg clip-path="url(#export-clip)" ');
svg = svg.replace('>', '>' + clipContent);

该方式导出的SVG在浏览器、Illustrator中打开都会仅显示指定bounds范围内的内容。

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