antvis/G6

导出svg文件时设置了backgroundColor没有生效 #3984

YICONGISME posted onGitHub

Describe the bug

  1. 在svg渲染方式下
  2. 导出svg文件设置了backgroundColor
  3. 但是导出的文件白色的节点看不见,原因是背景也是白的,所以融在一起了。
  4. 看来设置的背景色没有生效

应该是个bug吧?我都怀疑自己了,麻烦官方帮忙看下。

代码如下: this.graph.downloadFullImage('filename', '', { backgroundColor: '#F8F8F8' }) image

我自己临时的解决方案: 把源码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);

image

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


Fund this Issue

$0.00
Funded

Pull requests