PAPERJS:导出然后导入SVG创建额外的数据(Clippath)
我有一个图纸工具,需要能够导出,存储然后导入图纸。我正在使用以下代码进行导出:
const savedData = scope.project.exportSVG({
asString: true,
bounds: scope.view.bounds
});
以下是用于导入的代码:
scope.project.importSVG(savedData);
如果我绘制简单的行,请安装导入的内容(我刚刚绘制的行),并安装导出的内容,我应该得到相同的结果。取而代之的是我得到的:
导入:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1422"
height="498"
viewBox="0,0,1422,498"
>
<g
fill="none"
fill-rule="nonzero"
stroke="#990000"
stroke-width="3"
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="M426,41l4,5l4,7l4,5l2,4l3,6l3,5l3,4l2,4l3,3l1,4l1,1l1,4l2,2l1,2l2,4l1,1l1,3l2,2l1,1v1"
style="mix-blend-mode: destination-over"
/>
</g>
</svg>
导出:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1422"
height="498"
viewBox="0,0,1422,498"
>
<defs>
<clipPath id="clip-1">
<rect
x="0"
y="0"
width="1422"
height="498"
stroke="none"
stroke-width="1"
/>
</clipPath>
</defs>
<g
fill="none"
fill-rule="nonzero"
stroke="none"
stroke-width="none"
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 clip-path="url(#clip-1)">
<g stroke="#990000" stroke-width="3">
<path
d="M426,41l4,5l4,7l4,5l2,4l3,6l3,5l3,4l2,4l3,3l1,4l1,1l1,4l2,2l1,2l2,4l1,1l1,3l2,2l1,1v1"
/>
</g>
</g>
</g>
</svg>
DEF和CLIPPATH在向加载的图纸中添加更多时会导致分层问题。为什么要以这种方式转换我的SVG?那个剪纸来自哪里?我缺少有财产吗?
I have a drawing tool that needs to be able to export, store and then import a drawing. I am using the following code for exporting:
const savedData = scope.project.exportSVG({
asString: true,
bounds: scope.view.bounds
});
Here is the code for importing:
scope.project.importSVG(savedData);
If I draw a simple line, console what is imported (the line I just drew), and console what is exported I SHOULD get the same result. Instead this is what I get:
Import:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1422"
height="498"
viewBox="0,0,1422,498"
>
<g
fill="none"
fill-rule="nonzero"
stroke="#990000"
stroke-width="3"
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="M426,41l4,5l4,7l4,5l2,4l3,6l3,5l3,4l2,4l3,3l1,4l1,1l1,4l2,2l1,2l2,4l1,1l1,3l2,2l1,1v1"
style="mix-blend-mode: destination-over"
/>
</g>
</svg>
Export:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1422"
height="498"
viewBox="0,0,1422,498"
>
<defs>
<clipPath id="clip-1">
<rect
x="0"
y="0"
width="1422"
height="498"
stroke="none"
stroke-width="1"
/>
</clipPath>
</defs>
<g
fill="none"
fill-rule="nonzero"
stroke="none"
stroke-width="none"
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 clip-path="url(#clip-1)">
<g stroke="#990000" stroke-width="3">
<path
d="M426,41l4,5l4,7l4,5l2,4l3,6l3,5l3,4l2,4l3,3l1,4l1,1l1,4l2,2l1,2l2,4l1,1l1,3l2,2l1,1v1"
/>
</g>
</g>
</g>
</svg>
The defs and clippath are causing layering issues when adding more to the loaded drawing. Why is it converting my svg this way? Where is that clippath coming from? Is there a property I am missing?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论