修改svg后使用javascript将svg转换为png

我有一个svg，我正在使用下面的javascript代码将其转换为png

$(".exportImageButton").on("click",function(){
  var svg = document.querySelector( "svg" );
  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))) );

  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();
  };

不过，我想先修改svg元素，然后再将其转换为png。我也不想向用户显示屏幕上的技术

我只想将不透明度1添加到x轴标签，并转换为png，让屏幕上的svg保持不变，x轴标签的不透明度为0

---

我该怎么做呢。非常感谢您的帮助。

正如罗伯特建议的那样，就这么做吧

$.exportImageButton.onclick，函数{ var svg=document.querySelectorsvg； var rect=document.querySelectorrect rect.setAttributefill，绿色 var svgData=new XMLSerializer.SerializeToString GSVG； var canvas=document.createElementcanvas； 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.getContext2d； ctx.scale3，3； var img=document.createElementimg； img.setAttributesrc，数据：image/svg+xml；base64，+btoaunescapeencodeURIComponentsvgData； rect.setAttributefill，红色 img.onload=函数{ ctx.drawImageimg，0,0； var canvasdata=canvas.toDataURLimage/png，1； var pngimg=； d3.selectpngdataurl.htmlpngimg； var a=document.createElementa； a、 下载=下载\u img+.png； a、 href=拉票数据； document.body.a； a、 点击； }; } 出口

---

是什么阻止了你做这些事？使用DOM可以随心所欲地操作文档。您是否有标记与JavaScript一起使用？是否可以在没有D3的情况下使用此代码？仅使用纯javascript？@Giox签出并可能