使用jspdf

Question

我已经使用getorgchart库创建了组织结构。 在生成图表时，节点将xml标签以及标签和效果一起呈现。 我正在尝试将图表转换为pdf或png，但我可以看到结构，但每个结点都填充有黑色，图像标题和效果未出现在png和pdf中。

Visual Studio 2017， SQL， JavaScript， jQuery

 // library generating code as below for chart inside the html div
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
 viewBox="-1512.8396953533202,-106.69565491902367,
 2928.238484210526,1335.3984">
 <defs></defs>
 <g>
    <g data-node-id="#" class="get-level-2 " 
       transform="matrix(1,0,0,1,0,422)">

    <clipPath id="getVivaClip">
    <path class="get-box" d="M35 0 L187 0 Q222 0 222 35 L222 187 Q222 222 
    187 222 L35 222 Q0 222 0 187 L0 35 Q0 0 35 0 Z"></path>
    </clipPath>

    <image clip-path="url(#getVivaClip)" xlink:href="#" x="0" y="0"   
     height="222" preserveAspectRatio="xMidYMid slice" width="222">
    </image>

   <path class="get-text-pane" d="M222 172 Q222 222 187 222 L35 222 Q0 222 
    0 187 L0 172 Z"></path>

   <path class="get-text-pane" d="M35 0 L187 0 Q222 0 222 35 L222 50 L0 50 
   L0 50 Q0 0 35 0 Z"></path>

   <path class="get-box" d="M35 0 L187 0 Q222 0 222 35 L222 187 Q222 222 
    187 222 L35 222 Q0 222 0 187 L0 35 Q0 0 35 0 Z"></path>

   <g transform="matrix(1,0,0,1,0,100)">
   <g data-action="edit" class="btn1" 
   transform="matrix(0.14,0,0,0.14,-30,70)">
    ....
    .
    .
    .likewise 
   <g>....</g>
   <g>....</g>
   <g>....</g>
   </svg>


//generate pdf(javascript)

 $('#cmd').click(function ()
 {
    const svg1 = document.querySelector('svg').cloneNode(true);
    const svgAsXML = (new XMLSerializer).serializeToString(svg1);
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var DOMURL = self.URL || self.webkitURL || self;

    var img = new Image();

    var svg = new Blob([svgAsXML],{ type: "image/svg+xml;charset=utf-8"});

    var url = DOMURL.createObjectURL(svg);

    img.onload = function ()
    {
        ctx.drawImage(img, 0, 0);
        var png = canvas.toDataURL("image/png");
        document.querySelector('#png-container').innerHTML = '<img src="' 
        + png + '"/>';
        var pdf = new jsPDF();
        pdf.addImage(png, 'JPEG', 50, 50);
        pdf.save("Test.pdf");
        DOMURL.revokeObjectURL(png);
    };
    img.src = url;

});

我希望输出为pdf或png，并具有清晰的网页视觉效果，带有颜色和文本。