SVG 转 图片

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button class="exportImageButton">export</button><svg>  <rect width="200" height="200" fill="red" /></svg>
<canvas width="200px" height="200px" />
$(".exportImageButton").on("click", function() {  var svg = document.querySelector("svg");  var rect = document.querySelector("rect")  rect.setAttribute("fill", "green")  var svgData = new XMLSerializer().serializeToString(svg);  var canvas = document.createElement("canvas");  var svgSize = svg.getBoundingClientRect();  canvas.width = svgSize.width * 3;  canvas.height = svgSize.height * 3;  canvas.style.width = svgSize.width;  canvas.style.height = svgSize.height;  var ctx = canvas.getContext("2d");  ctx.scale(3, 3);  var img = document.createElement("img");  img.setAttribute("src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))));  rect.setAttribute("fill", "red")  img.onload = function() {    ctx.drawImage(img, 0, 0);    var canvasdata = canvas.toDataURL("image/png", 1);    var pngimg = '<img src="' + canvasdata + '">';    d3.select("#pngdataurl").html(pngimg);    var a = document.createElement("a");    a.download = "download_img" + ".png";    a.href = canvasdata;    document.body.appendChild(a);    a.click();  };})