Question

以下是我的代码。在我的html中有一个内联SVG，我需要能够将其保存为JPEG，PNG或SVG。

我尝试了一些不同的方法，将SVG转换为画布，然后转换为JPEG / PDF，图像将被裁剪，它与我看到的SVG不同。请让我知道我错过了什么。感谢

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>


<canvas id="canvas" width="800" height="400"></canvas>
<div id="png-container"></div>


<script>
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');

function triggerDownload (imgURI) {
  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', 'MY_COOL_IMAGE.png');
  a.setAttribute('href', imgURI);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

function download(){
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var data = new XMLSerializer().serializeToString(document.querySelector('svg'));
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    var imgURI = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');

    triggerDownload(imgURI);
  };

  img.src = url;
}
</script>
<button onclick="download()">svg to png</button>

<svg width="1109px" height="1082px" vM="0 0 1109 1082" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 1px solid black;"><g transform="matrix(1, 0, 0, 1, 0, 0)" clip-path="url(#mainClip13475)"><g transform="matrix(1, 0, 0, 1, 278.828125, 158.5)"><g transform="matrix(1, 0, 0, 1, -113.828125, -157.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#008bff" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path></g><text x="14" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">Start</text></g><g transform="matrix(1, 0, 0, 1, -45.828125, 861.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#ed0000" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#ed0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path></g><text x="11.5" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">End</text></g><g transform="matrix(1, 0, 0, 1, 701.171875, 169.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#008bff" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 22.5,0 L 2.5,0 C 1.125,0 0.012499999999999734,1.1250000000000004 0.012499999999999734,2.5 L 0,17.5 C 0,18.875 1.125,20 2.5,20 L 22.5,20 C 23.875,20 25,18.875 25,17.5 L 25,2.5 C 25,1.1250000000000004 23.875,0 22.5,0 z M 22.5,5 L 12.5,11.25 L 2.5,5 L 2.5,2.5 L 12.5,8.75 L 22.5,2.5 L 22.5,5 z" fill="white" stroke="none" transform="matrix(1, 0, 0, 1, 17.999999999999996, 20.499999999999996)"></path><path d="M 22.5,0 L 2.5,0 C 1.125,0 0.012499999999999734,1.1250000000000004 0.012499999999999734,2.5 L 0,17.5 C 0,18.875 1.125,20 2.5,20 L 22.5,20 C 23.875,20 25,18.875 25,17.5 L 25,2.5 C 25,1.1250000000000004 23.875,0 22.5,0 z M 22.5,5 L 12.5,11.25 L 2.5,5 L 2.5,2.5 L 12.5,8.75 L 22.5,2.5 L 22.5,5 z" fill="none" stroke="white" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 17.999999999999996, 20.499999999999996)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path></g><text x="33.5" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">Read Email</text></g><g transform="matrix(1, 0, 0, 1, -127.828125, -15)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, 601.171875, -72)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, -277.828125, 71)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, -104.22772471350943, -100.5)"><path d="M 13.5,0 L 13.5,35.75 Q 13.5,40.75 8.5,40.75 L 4.25,40.75 Q 0,40.75 0,45 L 0,77.5" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 7.399599713509437, 4)"></path><path d="M 13.5,0 L 13.5,35.75 Q 13.5,40.75 8.5,40.75 L 4.25,40.75 Q 0,40.75 0,45 L 0,77.5" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 7.399599713509437, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 11.399599713509437, 77)"></path></g><g transform="matrix(1, 0, 0, 1, -19.828125, 226.5)"><path d="M 747,0 L 747,310.5 Q 747,315.5 742,315.5 L 5,315.5 Q 0,315.5 0,320.5 L 0,627" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4.5, 4)"></path><path d="M 747,0 L 747,310.5 Q 747,315.5 742,315.5 L 5,315.5 Q 0,315.5 0,320.5 L 0,627" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4.5, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 8.5, 626.5)"></path></g><g transform="matrix(1, 0, 0, 1, -69.828125, -45.5)"><path d="M 0,57 L 64.828125,57 Q 69.828125,57 69.828125,52 L 69.828125,5 Q 69.828125,0 74.828125,0 L 663,0" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4.5)"></path><path d="M 0,57 L 64.828125,57 Q 69.828125,57 69.828125,52 L 69.828125,5 Q 69.828125,0 74.828125,0 L 663,0" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4.5)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 662.5, 0.5)"></path><g transform="matrix(1, 0, 0, 1, 11.678525286490563, 51.08857625084603)"><path d="M 5,0 L 22.299199427018873,0 C 24.537775677864907,0 27.299199427018873,2.761423749153968 27.299199427018873,5 L 27.299199427018873,14.822847498307937 C 27.299199427018873,17.061423749153967 24.537775677864907,19.822847498307937 22.299199427018873,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.888175964355469" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">Yes</text></g></g><g transform="matrix(1, 0, 0, 1, -258.08954874915395, 12)"><path d="M 119,0 L 5,0 Q 0,0 0,5 L 0,51" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 11.261423749153968, 4)"></path><path d="M 119,0 L 5,0 Q 0,0 0,5 L 0,51" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 11.261423749153968, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 15.261423749153968, 50.5)"></path><g transform="matrix(1, 0, 0, 1, 0, 4.838576250846032)"><path d="M 5,0 L 16.522847498307936,0 C 18.76142374915397,0 21.522847498307936,2.761423749153968 21.522847498307936,5 L 21.522847498307936,14.822847498307937 C 21.522847498307936,17.061423749153967 18.76142374915397,19.822847498307937 16.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="8" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">No</text></g></g><g transform="matrix(1, 0, 0, 1, 628.171875, -14)"><path d="M 0,0 L 0,84.75 Q 0,89.75 5,89.75 L 94.5,89.75 Q 99.5,89.75 99.5,94.75 L 99.5,175.5" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 0,84.75 Q 0,89.75 5,89.75 L 94.5,89.75 Q 99.5,89.75 99.5,94.75 L 99.5,175.5" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 107.5, 175)"></path><g transform="matrix(1, 0, 0, 1, 39.98857625084603, 83.33857625084603)"><path d="M 5,0 L 21.522847498307936,0 C 23.76142374915397,0 26.522847498307936,2.761423749153968 26.522847498307936,5 L 26.522847498307936,14.822847498307937 C 26.522847498307936,17.061423749153967 23.76142374915397,19.822847498307937 21.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.5" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">yes</text></g></g><g transform="matrix(1, 0, 0, 1, 11.171875, -51.41142374915397)"><path d="M 648,0 L 711.828125,0 Q 716.828125,0 716.828125,5 L 716.828125,40 Q 716.828125,45 711.828125,45 L 681.828125,45 Q 676.828125,45 676.828125,50 L 676.828125,928 Q 676.828125,933 671.828125,933 L 4,933" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 10.411423749153968)"></path><path d="M 648,0 L 711.828125,0 Q 716.828125,0 716.828125,5 L 716.828125,40 Q 716.828125,45 711.828125,45 L 681.828125,45 Q 676.828125,45 676.828125,50 L 676.828125,928 Q 676.828125,933 671.828125,933 L 4,933" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 10.411423749153968)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(-1, 0, 0, -1, 12.5, 947.411423749154)"></path><g transform="matrix(1, 0, 0, 1, 661.566701250846, 0)"><path d="M 5,0 L 16.522847498307936,0 C 18.76142374915397,0 21.522847498307936,2.761423749153968 21.522847498307936,5 L 21.522847498307936,14.822847498307937 C 21.522847498307936,17.061423749153967 18.76142374915397,19.822847498307937 16.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="8" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">No</text></g></g><g transform="matrix(1, 0, 0, 1, -250.828125, 129)"><path d="M 0,0 L 0,754 Q 0,759 5,759 L 197,759" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 0,754 Q 0,759 5,759 L 197,759" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 196.5, 759)"></path><g transform="matrix(1, 0, 0, 1, 13.48857625084603, 752.588576250846)"><path d="M 5,0 L 70.52284749830794,0 C 72.76142374915398,0 75.52284749830794,2.761423749153968 75.52284749830794,5 L 75.52284749830794,14.822847498307937 C 75.52284749830794,17.061423749153967 72.76142374915398,19.822847498307937 70.52284749830794,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="35" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153975, 3.261423749153967)">Not is spam</text></g></g><g transform="matrix(1, 0, 0, 1, -219.828125, -49.5)"><path d="M 0,143 L 62.828125,143 Q 67.828125,143 67.828125,138 L 67.828125,5 Q 67.828125,0 72.828125,0 L 813,0" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 8.5)"></path><path d="M 0,143 L 62.828125,143 Q 67.828125,143 67.828125,138 L 67.828125,5 Q 67.828125,0 72.828125,0 L 813,0" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 8.5)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 812.5, 4.5)"></path><g transform="matrix(1, 0, 0, 1, 9.678525286490563, 141.08857625084602)"><path d="M 5,0 L 22.299199427018873,0 C 24.537775677864907,0 27.299199427018873,2.761423749153968 27.299199427018873,5 L 27.299199427018873,14.822847498307937 C 27.299199427018873,17.061423749153967 24.537775677864907,19.822847498307937 22.299199427018873,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.888175964355469" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">Yes</text></g></g></g></g><clipPath id="mainClip13475"><rect x="0" y="0" width="1109" height="1082"></rect></clipPath></svg>

<canvas id="canvas"></canvas>
</body>
</html>

Answer 1

I figured out the issue which was causing cropped image.

The issue was Canvas height and width were declared fixed.

Now I'm dynamically specifying the height and width.

by getting the value from SVG and adding 300 [Not required]

***canvas.width = document.querySelector('svg').width.baseVal.value + 300;     canvas.height = document.querySelector('svg').height.baseVal.value + 300;*** 

--------Updated code---------------



    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    </head>
    <body>


    <canvas id="canvas" style="display:none;" ></canvas>
    <div id="png-container" style="display:none;"></div>


    <script>
    var btn = document.querySelector('button');
    var svg = document.querySelector('svg');
    var canvas = document.querySelector('canvas');

    function triggerDownload (imgURI) {
      var evt = new MouseEvent('click', {
        view: window,
        bubbles: false,
        cancelable: true
      });

      var a = document.createElement('a');
      a.setAttribute('download', 'MY_COOL_IMAGE.png');

      a.setAttribute('href', imgURI);
      a.setAttribute('target', '_blank');

      a.dispatchEvent(evt);
    }

    function download(){
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var data = new XMLSerializer().serializeToString(document.querySelector('svg'));
      var DOMURL = window.URL || window.webkitURL || window
        canvas.width = document.querySelector('svg').width.baseVal.value + 300; //document.width is obsolete
        canvas.height = document.querySelector('svg').height.baseVal.value + 300; //document.height is obsolete
        canvasW = canvas.width;
        canvasH = canvas.height;
     svg.style.border = "0px solid black";
      var img = new Image();
      var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
      var url = DOMURL.createObjectURL(svgBlob);

      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);

        var imgURI = canvas
            .toDataURL('image/png')
            .replace('image/png', 'image/octet-stream');

        triggerDownload(imgURI);
      };

      img.src = url;
    }
    </script>
    <button onclick="download()">svg to png</button>

    <svg width="1109px" height="1082px" vM="0 0 1109 1082" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 1px solid black;"><g transform="matrix(1, 0, 0, 1, 0, 0)" clip-path="url(#mainClip13475)"><g transform="matrix(1, 0, 0, 1, 278.828125, 158.5)"><g transform="matrix(1, 0, 0, 1, -113.828125, -157.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#008bff" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path></g><text x="14" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">Start</text></g><g transform="matrix(1, 0, 0, 1, -45.828125, 861.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#ed0000" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#ed0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path></g><text x="11.5" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">End</text></g><g transform="matrix(1, 0, 0, 1, 701.171875, 169.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#008bff" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 22.5,0 L 2.5,0 C 1.125,0 0.012499999999999734,1.1250000000000004 0.012499999999999734,2.5 L 0,17.5 C 0,18.875 1.125,20 2.5,20 L 22.5,20 C 23.875,20 25,18.875 25,17.5 L 25,2.5 C 25,1.1250000000000004 23.875,0 22.5,0 z M 22.5,5 L 12.5,11.25 L 2.5,5 L 2.5,2.5 L 12.5,8.75 L 22.5,2.5 L 22.5,5 z" fill="white" stroke="none" transform="matrix(1, 0, 0, 1, 17.999999999999996, 20.499999999999996)"></path><path d="M 22.5,0 L 2.5,0 C 1.125,0 0.012499999999999734,1.1250000000000004 0.012499999999999734,2.5 L 0,17.5 C 0,18.875 1.125,20 2.5,20 L 22.5,20 C 23.875,20 25,18.875 25,17.5 L 25,2.5 C 25,1.1250000000000004 23.875,0 22.5,0 z M 22.5,5 L 12.5,11.25 L 2.5,5 L 2.5,2.5 L 12.5,8.75 L 22.5,2.5 L 22.5,5 z" fill="none" stroke="white" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 17.999999999999996, 20.499999999999996)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path></g><text x="33.5" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">Read Email</text></g><g transform="matrix(1, 0, 0, 1, -127.828125, -15)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, 601.171875, -72)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, -277.828125, 71)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, -104.22772471350943, -100.5)"><path d="M 13.5,0 L 13.5,35.75 Q 13.5,40.75 8.5,40.75 L 4.25,40.75 Q 0,40.75 0,45 L 0,77.5" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 7.399599713509437, 4)"></path><path d="M 13.5,0 L 13.5,35.75 Q 13.5,40.75 8.5,40.75 L 4.25,40.75 Q 0,40.75 0,45 L 0,77.5" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 7.399599713509437, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 11.399599713509437, 77)"></path></g><g transform="matrix(1, 0, 0, 1, -19.828125, 226.5)"><path d="M 747,0 L 747,310.5 Q 747,315.5 742,315.5 L 5,315.5 Q 0,315.5 0,320.5 L 0,627" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4.5, 4)"></path><path d="M 747,0 L 747,310.5 Q 747,315.5 742,315.5 L 5,315.5 Q 0,315.5 0,320.5 L 0,627" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4.5, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 8.5, 626.5)"></path></g><g transform="matrix(1, 0, 0, 1, -69.828125, -45.5)"><path d="M 0,57 L 64.828125,57 Q 69.828125,57 69.828125,52 L 69.828125,5 Q 69.828125,0 74.828125,0 L 663,0" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4.5)"></path><path d="M 0,57 L 64.828125,57 Q 69.828125,57 69.828125,52 L 69.828125,5 Q 69.828125,0 74.828125,0 L 663,0" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4.5)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 662.5, 0.5)"></path><g transform="matrix(1, 0, 0, 1, 11.678525286490563, 51.08857625084603)"><path d="M 5,0 L 22.299199427018873,0 C 24.537775677864907,0 27.299199427018873,2.761423749153968 27.299199427018873,5 L 27.299199427018873,14.822847498307937 C 27.299199427018873,17.061423749153967 24.537775677864907,19.822847498307937 22.299199427018873,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.888175964355469" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">Yes</text></g></g><g transform="matrix(1, 0, 0, 1, -258.08954874915395, 12)"><path d="M 119,0 L 5,0 Q 0,0 0,5 L 0,51" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 11.261423749153968, 4)"></path><path d="M 119,0 L 5,0 Q 0,0 0,5 L 0,51" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 11.261423749153968, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 15.261423749153968, 50.5)"></path><g transform="matrix(1, 0, 0, 1, 0, 4.838576250846032)"><path d="M 5,0 L 16.522847498307936,0 C 18.76142374915397,0 21.522847498307936,2.761423749153968 21.522847498307936,5 L 21.522847498307936,14.822847498307937 C 21.522847498307936,17.061423749153967 18.76142374915397,19.822847498307937 16.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="8" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">No</text></g></g><g transform="matrix(1, 0, 0, 1, 628.171875, -14)"><path d="M 0,0 L 0,84.75 Q 0,89.75 5,89.75 L 94.5,89.75 Q 99.5,89.75 99.5,94.75 L 99.5,175.5" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 0,84.75 Q 0,89.75 5,89.75 L 94.5,89.75 Q 99.5,89.75 99.5,94.75 L 99.5,175.5" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 107.5, 175)"></path><g transform="matrix(1, 0, 0, 1, 39.98857625084603, 83.33857625084603)"><path d="M 5,0 L 21.522847498307936,0 C 23.76142374915397,0 26.522847498307936,2.761423749153968 26.522847498307936,5 L 26.522847498307936,14.822847498307937 C 26.522847498307936,17.061423749153967 23.76142374915397,19.822847498307937 21.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.5" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">yes</text></g></g><g transform="matrix(1, 0, 0, 1, 11.171875, -51.41142374915397)"><path d="M 648,0 L 711.828125,0 Q 716.828125,0 716.828125,5 L 716.828125,40 Q 716.828125,45 711.828125,45 L 681.828125,45 Q 676.828125,45 676.828125,50 L 676.828125,928 Q 676.828125,933 671.828125,933 L 4,933" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 10.411423749153968)"></path><path d="M 648,0 L 711.828125,0 Q 716.828125,0 716.828125,5 L 716.828125,40 Q 716.828125,45 711.828125,45 L 681.828125,45 Q 676.828125,45 676.828125,50 L 676.828125,928 Q 676.828125,933 671.828125,933 L 4,933" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 10.411423749153968)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(-1, 0, 0, -1, 12.5, 947.411423749154)"></path><g transform="matrix(1, 0, 0, 1, 661.566701250846, 0)"><path d="M 5,0 L 16.522847498307936,0 C 18.76142374915397,0 21.522847498307936,2.761423749153968 21.522847498307936,5 L 21.522847498307936,14.822847498307937 C 21.522847498307936,17.061423749153967 18.76142374915397,19.822847498307937 16.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="8" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">No</text></g></g><g transform="matrix(1, 0, 0, 1, -250.828125, 129)"><path d="M 0,0 L 0,754 Q 0,759 5,759 L 197,759" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 0,754 Q 0,759 5,759 L 197,759" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 196.5, 759)"></path><g transform="matrix(1, 0, 0, 1, 13.48857625084603, 752.588576250846)"><path d="M 5,0 L 70.52284749830794,0 C 72.76142374915398,0 75.52284749830794,2.761423749153968 75.52284749830794,5 L 75.52284749830794,14.822847498307937 C 75.52284749830794,17.061423749153967 72.76142374915398,19.822847498307937 70.52284749830794,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="35" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153975, 3.261423749153967)">Not is spam</text></g></g><g transform="matrix(1, 0, 0, 1, -219.828125, -49.5)"><path d="M 0,143 L 62.828125,143 Q 67.828125,143 67.828125,138 L 67.828125,5 Q 67.828125,0 72.828125,0 L 813,0" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 8.5)"></path><path d="M 0,143 L 62.828125,143 Q 67.828125,143 67.828125,138 L 67.828125,5 Q 67.828125,0 72.828125,0 L 813,0" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 8.5)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 812.5, 4.5)"></path><g transform="matrix(1, 0, 0, 1, 9.678525286490563, 141.08857625084602)"><path d="M 5,0 L 22.299199427018873,0 C 24.537775677864907,0 27.299199427018873,2.761423749153968 27.299199427018873,5 L 27.299199427018873,14.822847498307937 C 27.299199427018873,17.061423749153967 24.537775677864907,19.822847498307937 22.299199427018873,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.888175964355469" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">Yes</text></g></g></g></g><clipPath id="mainClip13475"><rect x="0" y="0" width="1109" height="1082"></rect></clipPath></svg>


    </body>
    </html>

SVG到PNG无法正常工作

1 个答案: