Question

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

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标头。我显然遗漏了一些东西，因为我正在处理的项目会在画布上显示SVG，其中<svg>个元素带有以下标题：

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

我确定我错过了paper.js如何工作的一些细节，看起来像paper.js具有放入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>元素

1 个答案: