title: convert svg to png using javascript after modification to svg
body: <p>I have a svg that I am converting to png using below javascript code </p>
  
  <pre><code>$(".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 = '&lt;img src="'+canvasdata+'"&gt;';
        d3.select("#pngdataurl").html(pngimg);
  
        var a = document.createElement("a");
        a.download = "download_img"+".png";
        a.href = canvasdata;
        document.body.appendChild(a);
        a.click();
    };
  </code></pre>
  
  <p>However I want to alter svg element before I want it  convert to png. Also I dont want to show that chnages on screen to the user.</p>
  
  <p>I just would like to add opacity 1 to x axis labels and convert to png and let the svg on screen remain as it is with opacity 0 for x axis label.</p>
  
  <p>How can i do that . Any help appreciated.</p>