SVG.js如何导出保留裁剪效果的嵌套SVG？

我用SVG.js创建了一个画布，里面包含嵌套的作品图层（artwork）和顶层的控制UI。现在想导出带有裁剪效果的作品图层，但遇到一个问题：Defs和SVG头部都在根节点里，调用嵌套SVG的svg()方法返回的svgString里没有这些内容。

代码示例：

canvas = SVG()
artwork = canvas.nested()
artworkLimit = canvas.rect(100,100)
clip = canvas.clip().add(artworkLimit)
artwork.clipWith(clip)
/* 在这里添加作品内容 */
svgString = artwork.svg()

我原本以为有内置方法可以导出屏幕上显示的嵌套SVG，但翻遍文档也没找到。我试过把裁剪放在嵌套SVG和容器内部，但Defs始终会被放在根SVG对象上。

请问以下哪种方案更合适？

• A. 导出整个SVG.js对象，用SVG(function(node){...})修饰符排除UI元素，保留Defs和头部，同时撤销作品图层的旋转、缩放和平移操作。缺点是用户会看到画面闪烁，因为需要重新定位元素。
• B. 直接用嵌套画板的SVG getter获取字符串，通过字符串查找替换手动插入头部和Defs。操作繁琐，但对用户体验影响较小。
• C. 在第二个屏幕外的SVG画布/对象中重新构建作品图层，再导出这个画布。用户不会看到界面变化，而且对位图导出也更友好。
• D. 是否有更优的方案？

方案分析与推荐 #

1. 方案A：实现相对直接，但画面闪烁的问题会明显影响用户体验，除非能找到无感知的定位撤销方式，否则不推荐。
2. 方案B：字符串操作容易出错，比如Defs里的引用关系复杂时，手动替换很容易遗漏或破坏结构，维护成本高，不建议作为长期方案。
3. 方案C：这是最稳妥的方案。屏幕外的画布完全独立于主UI，构建时可以直接把裁剪逻辑和作品内容都放在这个嵌套画布内部，确保Defs和头部都包含在导出的SVG里，而且用户完全不会感知到后台的导出操作，体验最好。同时独立画布也更方便后续扩展，比如需要导出位图时可以直接用这个画布处理。
4. 更优方案（对应D）：可以基于方案C做优化——提前维护一个与主作品图层同步的镜像画布，每次主图层内容更新时同步更新镜像画布，导出时直接拿镜像画布的SVG字符串。这样避免了导出时临时构建的性能开销，尤其是作品内容复杂时，同步更新的成本比临时构建低很多。另外，SVG.js的clone()方法可以快速复制元素，能大幅降低同步的代码量。

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