Open ljdavns opened 1 year ago
👋 @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.
你要邀请我加入你的 codesanbox team 才能查看你的 demo,我的账号是 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 导出图片的库。
<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元素转换
@JoeWrights
我改成了<img :src="base64Svg">
可以导出
其中loadSvgAsBase64 = await this.loadSvgAsBase64('assets/icons/your_svg_file.svg');
但是导出的时候自定义样式表有问题(对于这个只有svg的例子来说没问题),按照教程把css复制到变量传进去还是不太对
请问你后面解决这个问题了吗?
我的情况:使用 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
}
问题描述
使用最新版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,然后点击右上角导出
预期行为
预期导出与画布一致的图片 但是导出内容中节点全为空白
平台
屏幕截图或视频(可选)
补充说明(可选)
No response