PAPERJS:导出然后导入SVG创建额外的数据(Clippath)

发布于 2025-02-07 04:38:02 字数 2204 浏览 2 评论 0原文

我有一个图纸工具,需要能够导出,存储然后导入图纸。我正在使用以下代码进行导出:

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文