直接上程式碼：

//svg 儲存成Png  fuction
function svgToPng(svg,pngWidth,pngHeight){
 	var serializer = new XMLSerializer();  
     var source = '<?xml version="1.0" standalone="no"?>\r\n'+serializer.serializeToString(svg.node());  
     var image = new Image;  
     	image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);  
     var canvas = document.createElement("canvas");  
         canvas.width = pngWidth;  
         canvas.height = pngHeight; 
     var context = canvas.getContext("2d");  
     	context.fillStyle = '#fff';//設定儲存後的PNG 是白色的
     	context.fillRect(0,0,10000,10000);
     	context.drawImage(image, 0, 0);  
     return canvas.toDataURL("image/png");  
 }
 

 $('#imgSave').click(function(){
               var url=svgToPng(svg,width,height);
               var pngName="svgtoPng圖";
               var a = document.createElement("a");  
                      a.download = pngName+".png";  
                      a.href = url;  
                      a.click();
       })
 

svg 是D3 建立的，程式碼如下：

 var svg = d3.select("#jftp").append("svg")
                    .attr("width", width)
                    .attr("height",height);

 var width = $(document).width()-20;
 var height = $(document).height()-108;

下載後 圖片這種情況：原因是

linkEnter.append("path")
       //  .attr("class", "link")//  使用了css 控制了連線格式 而 這種控制 在匯出圖片時，不能控制樣式
	//setting the styles through CSS. This doesn't generally work well with rendering to PNG; 
        .attr("style", "fill: none; stroke-opacity: 1;stroke-width: 1.5px;")//正確方法應該是 直接css在程式碼中控制。
          .attr("d", function(d) {
                var o = {x: data.x0, y: data.y0};
                 return diagonal({source: o, target: o});
                 })
          .transition()
          .duration(500)
          .attr("d", diagonal);