SVG to PNG無法正常工作

以下是我的代碼。在我的html中有一個內聯SVG，我需要能夠將它保存爲JPEG，PNG或SVG。SVG to PNG無法正常工作

我已經嘗試了將SVG轉換爲canvas然後轉換爲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>

來源

2016-12-29 vinod merwade

你是什麼意思「它不是一樣的SVG我看」？另外，你嘗試過的「幾種不同的方法」是什麼？ – Travis

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>

來源

2016-12-29 04:44:46

SVG to PNG無法正常工作

回答

相關問題