使用最新版X6，导出自定义shape节点仍然为空白

[ljdavns]

问题描述

使用最新版X6，导出自定义shape节点仍然为空白 代码和配置在复现链接src/components中

重现链接

https://codesandbox.io/p/github/ljdavns/architect/credit?file=%2Fsrc%2Fcomponents%2Farchitect-graph%2Findex.vue&workspace=%257B%2522activeFileId%2522%253A%2522clft3168x0015g4i205jt8hkv%2522%252C%2522openFiles%2522%253A%255B%2522%252Findex.html%2522%252C%2522%252Fsrc%252Fcomponents%252Farchitect-graph%252Fgraph-node%252Findex.vue%2522%252C%2522%252Fsrc%252Fcomponents%252Farchitect-graph%252Findex.vue%2522%252C%2522%252Fpackage.json%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clft3arav01bh3j6i1ieyvdd1%2522%253A%257B%2522key%2522%253A%2522clft3arav01bh3j6i1ieyvdd1%2522%252C%2522devtools%2522%253A%255B%257B%2522key%2522%253A%2522clft63su3001i3j6jeljw3tsz%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clft4gc01013q3j6jsn2ewoji%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%252C%2522name%2522%253A%2522dev%2522%257D%257D%252C%2522currentSpace%2522%253A%2522clft3arav01bh3j6i1ieyvdd1%2522%252C%2522spacesOrder%2522%253A%255B%2522clft3arav01bh3j6i1ieyvdd1%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D

重现步骤

open in new tab，然后点击右上角导出

预期行为

预期导出与画布一致的图片 但是导出内容中节点全为空白

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome]
• X6 版本: [2.x ]

屏幕截图或视频（可选）

补充说明（可选）

No response

[x6-bot[bot]]

👋 @ljdavns

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[NewByVector]

你要邀请我加入你的 codesanbox team 才能查看你的 demo，我的账号是 NewByVector。

[ljdavns]

你要邀请我加入你的 codesanbox team 才能查看你的 demo，我的账号是 NewByVector。

sorry，现在用分享链接可以进入 https://codesandbox.io/p/github/ljdavns/architect/credit?file=%2Fsrc%2Fcomponents%2Farchitect-graph%2Findex.vue&workspace=%257B%2522activeFileId%2522%253A%2522clft3168x0015g4i205jt8hkv%2522%252C%2522openFiles%2522%253A%255B%2522%252Findex.html%2522%252C%2522%252Fsrc%252Fcomponents%252Farchitect-graph%252Fgraph-node%252Findex.vue%2522%252C%2522%252Fsrc%252Fcomponents%252Farchitect-graph%252Findex.vue%2522%252C%2522%252Fpackage.json%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clft3arav01bh3j6i1ieyvdd1%2522%253A%257B%2522key%2522%253A%2522clft3arav01bh3j6i1ieyvdd1%2522%252C%2522devtools%2522%253A%255B%257B%2522key%2522%253A%2522clft63su3001i3j6jeljw3tsz%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clft4gc01013q3j6jsn2ewoji%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%252C%2522name%2522%253A%2522dev%2522%257D%257D%252C%2522currentSpace%2522%253A%2522clft3arav01bh3j6i1ieyvdd1%2522%252C%2522spacesOrder%2522%253A%255B%2522clft3arav01bh3j6i1ieyvdd1%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D

[NewByVector]

<svg data-v-1b17c970="" style="width: 100%; height: 100%; z-index: -1;"><use href="#svg-icon-中间件服务" data-v-1b17c970=""></use></svg>

svg 里面使用 use 这种方式现在还没法导出，而且我们暂时还没有精力来改进这一块，你可以试试其它的将 HTML 导出图片的库。

[JoeWrights]

<svg data-v-1b17c970="" style="width: 100%; height: 100%; z-index: -1;"><use href="#svg-icon-中间件服务" data-v-1b17c970=""></use></svg>

svg 里面使用 use 这种方式现在还没法导出，而且我们暂时还没有精力来改进这一块，你可以试试其它的将 HTML 导出图片的库。

大佬有什么好的方案吗，尝试使用html2canvas，但是不支持svg元素转换

[ljdavns]

@JoeWrights 我改成了<img :src="base64Svg">可以导出 其中loadSvgAsBase64 = await this.loadSvgAsBase64('assets/icons/your_svg_file.svg');

但是导出的时候自定义样式表有问题（对于这个只有svg的例子来说没问题），按照教程把css复制到变量传进去还是不太对

[wangdi190]

请问你后面解决这个问题了吗？

[maqingbo]

我的情况：使用 vue3 组件创建的节点，导出 svg 时在浏览器打开一片空白。

解决方式：经排查是导出的 svg viewBox 值不对，显式的传入 viewBox 即可正常导出。

switch (type.value) {
  case 'png':
    props.graph.exportPNG(filename.value, options)
    break
  case 'svg':
    {
      const bbox = props.graph.getContentBBox()
      const padding = 20
      props.graph.exportSVG(filename.value, {
        viewBox: {
          x: bbox.x - padding,
          y: bbox.y - padding,
          width: bbox.width + 2 * padding,
          height: bbox.height + 2 * padding,
        },
      })
    }
    break
}