0
Ниже мой код. иметь встроенный SVG в моем html, и мне нужно сохранить это как JPEG, PNG или SVG.SVG to PNG не работает должным образом
Я пробовал несколько разных методов с преобразованием SVG в холст, а затем конвертировался в JPEG/PDF, изображение будет обрезано, и это не то же самое, что и SVG. Pls, дайте мне знать, что мне не хватает. Благодаря
<!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>
Что вы имеете в виду «это не так же, как SVG я вижу»? Кроме того, какие «несколько разных методов» вы пробовали? – Travis