Canvas 将svg转换为png时，高度、宽度和字体不一致

我试图将svg转换为png，我发现转换后的图像与svg不同。as如何确保svg和png之间的一致性

将svg转换为png的代码

    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)

实际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];

转换后的PNG:

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];

这是样品

---

如果我将比例从5000改为6000，svg会更大，但png不会。小提琴输出svg可以右键单击导出为png。

以下是我玩过的小提琴：

我已经调整了你的，所以你不必滚动查看整个svg。还增加了：

• 不是右键单击，而是左键单击事件

• 单击后，保存到文件，但也保存到

  输出

  div，以便您可以立即在屏幕上看到输出

• 添加了内联样式，以便在生成的输出中显示样式

内联样式：

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

现在，当你改变比例时，一切似乎都正常？和以前一样，我什么也看不见

---

看一看我展示的小提琴，让我知道它是否适合你

我自己也没用多久。不确定您的问题是什么，但不确定您是否知道，CSS样式只有在内联时才有效。如果您给某个类设置了样式，并在CSS中为该类设置了样式，那么它将不起作用，例如，宽度-高度-字体大小等。我知道这一行将显示在生成的画布中：'.style（“fill”），“#FFF”）''，在D3中，但我不确定这一行：''jQuery（'#imgDiv'）.CSS({显示：'block'，'padding left'：'25px'，溢出：'scroll'}）由于我没有使用JQuery，我可能错了。如果可以的话，把你的问题简单地处理一下，我会有一个look@thisOneGuy我发现问题出在d3 scale上，它使svg变大，但png导出的大小很小。这里是fiddle。您可以尝试使用var projection=d3.geo.mercator（）.scale（5000.center）（[83.96,28.27]）；从5000->6000，右键单击svg。我找不到更改？您翻译了svg吗？很抱歉，忘了提及我翻译它只是为了将它放在中间：。attr（'transform'，'translate（'+（-width/2）+'，0'））；//svg的中心，小提琴的第31行。这解决了您的问题吗？我找不到更改。我尝试更改高度和长度，但图像仍然弯曲，质量相同。我想知道主要问题是什么。@kinkajou效果很好。如果您转到图像位置，右键单击文件并转到属性，您将看到尺寸与SVG相同：1500 x 650我已接受答案。我将尝试查看hidpi！