为什么SVG导出的图像质量很差？

Question

我动态地渲染了一个SVG：

但是当我下载它时，它变成了这样：

我怀疑这是因为我的JavaScript代码搞砸了，但不知道为什么？我是SVG的新手所以请耐心等待。理想情况下，我想将其保存为PNG文件，没有质量损失。非常感谢〜！

    let svg = document.getElementById('graphSvg');

    // get svg source.
    let serializer = new XMLSerializer();
    let source = serializer.serializeToString(svg);

    // add name spaces.
    if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
      source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
    }
    if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
      source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
    }

    // add xml declaration
    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

    // convert svg source to URI data scheme.
    let url = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(source);

    let a = document.createElement('a');
    a.download = 'graph.svg';
    a.href = url;
    a.click();