Paper JS 仅导出 <g> </g> 元素

Question

所以我创建了一个 paperjs 路径 object 并将其放在一个组中：

let path = new paper.Path.Rectangle(originpoint, deviceWidth, deviceHeight);
let ret = new paper.Group();
ret.addChild(path);

然后我将 ret 导出为 SVG，如下所示：

let svg = ret.exportSVG({
            asString:true
        });

但是它的输出只是：

<g xmlns="http://www.w3.org/2000/svg" fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,85000v-85000h135000v85000z"/></g>

如您所见，此处没有 <svg> 元素。我怎样才能得到标准的 SVG header 而不必手动将它拼接到代码中。我显然遗漏了一些东西，因为我正在处理的项目生成了 canvas 上显示的内容的 SVG，其中 <svg> 元素具有以下 header:

<svg width="135mm" height="85mm" viewBox="0 0 135000 85000" xmlns="http://www.w3.org/2000/svg">

我确定我遗漏了 paper.js 工作原理的一些细节，它似乎 paper.js 有特定的 object 放入 svg 容器。有谁知道它是什么？或者我可能做错了什么....

谢谢！

Answer 1

我不是 paper.js 用户之类的，只是在玩这个库，我意识到 exportSVG 是从纸上原型继承的，所以如果你从当前项目中调用它 paper.project 然后它似乎按预期工作：

paper.setup(new paper.Size(300, 200));
let path = new paper.Path.Rectangle([0,0], 100, 100);
let ret = new paper.Group();
ret.addChild(path);
let svg = paper.project.exportSVG({
            asString:true
        });
        console.log(svg);

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g><path d="M0,100v-100h100v100z"/></g></g></svg>

FIDDLE: https://jsfiddle.net/ibowankenobi/juem7f80/1/

滚动到底部以查看代码段。

Paper JS 仅导出 <g> </g> 元素

Paper JS only exporting <g> </g> element

javascript

svg

paperjs