antvis/G6
The issue has been closed
导出svg文件时设置了backgroundColor没有生效 #3984
YICONGISME posted onGitHub
Describe the bug
- 在svg渲染方式下
- 导出svg文件设置了backgroundColor
- 但是导出的文件白色的节点看不见,原因是背景也是白的,所以融在一起了。
- 看来设置的背景色没有生效
应该是个bug吧?我都怀疑自己了,麻烦官方帮忙看下。
代码如下:
this.graph.downloadFullImage('filename', '', {
backgroundColor: '#F8F8F8'
})
我自己临时的解决方案: 把源码copy了出来,给svg元素设置了背景颜色
let cloneNode, svgDocType, svgDoc, svgData;
let dataURL = '';
console.error(graphSvg)
const canvasDom = graphSvg.cfg.canvas.get('el');
cloneNode = canvasDom.cloneNode(true);
//设置背景颜色,防止白色节点和背景色重叠
cloneNode.style.backgroundColor = '#F8F8F8';
svgDocType = document.implementation.createDocumentType('svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
svgDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg', svgDocType);
svgDoc.replaceChild(cloneNode, svgDoc.documentElement);
svgData = new XMLSerializer().serializeToString(svgDoc);
dataURL = "data:image/svg+xml;charset=utf8,".concat(encodeURIComponent(svgData));
let link = document.createElement('a');
link.addEventListener('click', function () {
link.download = 'filename';
link.href = dataURL;
});
let e = document.createEvent('MouseEvents');
e.initEvent('click', false, false);
link.dispatchEvent(e);
Your Example Website or App
无
Steps to Reproduce the Bug or Issue
1.渲染方式svg 2.导出svg,设置背景色 this.graph.downloadFullImage('filename', '', { backgroundColor: '#F8F8F8' }) 3.导出的文件背景还是白色
Expected behavior
1.希望设置的backgroundColor能生效
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: Chrome(105.0.5195.125)
- Version: 4.7.4
Additional context
No response