svgをpngに変換すると高さ、幅、フォントが一貫しない

Question

svgをpngに変換しようとしていますが、変換された画像がsvgと同じではないことがわかりました。どのようにsvgとpngの両方の一貫性を保証することができますか？

コードは秘密SVGに

jQuery('#imgDiv').css({display: 'block', 'padding-left': '25px', overflow: 'scroll'}); 
    jQuery('#resImg').css({display: 'block', 'padding-left': '25px'}); 
    var svg = jQuery('#map').html().replace(/>\s+/g, ">").replace(/\s+</g, "<"); 
    // strips off all spaces between tags 

    canvg('cvs', svg, { 
     ignoreMouse: true, 
     ignoreAnimation: true 
    }); 
    var canvas = document.getElementById('cvs'); 

    img = canvas.toDataURL("image/png", 1); 
    var a = document.createElement('a'); 
    a.href = img; 
    a.download = "image.png"; 
    var clickEvent = new MouseEvent("click", { 
     "view": window, 
     "bubbles": true, 
     "cancelable": false 
    }); 
    a.dispatchEvent(clickEvent) 

をPNG形式にすべてがファイルですが、私は身長ダウンロードした画像を見たとき、幅が異なっており、ラベルやフォントが表示されていません。

コードSVGを生成するために：

var width = 1260, 
     height = 910; 
var svg = d3.select("#map") 
      .append("svg") 
      .attr("width", width) 
      .attr("height", height) 
      .on("contextmenu", function (d, i) { 
       d3.event.preventDefault(); 
       printMap(); 
      }); 

    svg.append("rect") 
      .attr("x", 0) 
      .attr("y", 0) 
      .attr("width", width) 
      .attr("height", height) 
      .style("stroke", '#000000') 
      .style("stroke-opacity", 1) 
      .style("fill", "#FFF") 
      .style("fill-opacity", 0) 
      .style("stroke-width", 2); 

var cluster = topojson.feature(data, data.objects.clustergeojson).features; 
     var projection = d3.geo.mercator(); 
     s = 250; 

     projection.scale(8500) 
       .center([83, 29.5]); 

     var path = d3.geo.path().projection(projection); 

     var b = path.bounds(cluster), 
       s = .95/Math.max((b[1][0] - b[0][0])/width, (b[1][1] - b[0][1])/height), 
       t = [(width - s * (b[1][0] + b[0][0]))/2, (height - s * (b[1][1] + b[0][1]))/2]; 

実際のSVG：

変換されたPNG：

サンプルはjsFiddleです。

var projection = d3.geo.mercator() 
    .scale(5000) 
    .center([83.96, 28.27]); 

スケールを5000から6000に変更すると、svgは大きくなりますが、pngではなくなります。 fiddle出力svgを右クリックしてpngとしてエクスポートすることができます。あなたは全体のSVGを見るためにスクロールする必要がいけないので、私はあなたを調整したhttps://jsfiddle.net/thatoneguy/bnLoq1Lw/9/

：ここ

Answer 1

は私が周りに演じてきたバイオリンです。また、右クリックの代わりに、

• を追加しました。

• クリックするとファイルに保存されますが、output divに保存すると、すぐに画面に出力が表示されます。

• インラインスタイリングが追加され、生成された出力にスタイリングが表示されます。

インラインスタイリング：あなたはスケールを変更するとき

.style('stroke','red') 
.style('fill','green') 

は今、すべて正常に動作するようですか？前と同じように私は何も見ることができませんでした。

は私が示されているフィドルを見てください、