将SVG转换为PNG时如何包含<div>标签

时间:2017-11-27 11:31:04

标签: javascript jquery html angularjs svg

SVG新手在这里。我尝试进行增强,其中在将SVG地图转换为PNG期间包含国家/地区标签(<div>)。

要转换的地图如下所示:

enter image description here

这就是DOM中的样子。要包含的div标签会突出显示。

enter image description here

这是我迄今为止所尝试过的:

var svg = $('svg', $(svgParentId));

// append map labels                                          // From this line...
var outerHtmlColl = $(svgParentId).find('.marker-label');     //
                                                              //
_.forEach(outerHtmlColl, function(item){                      //  
    svg = svg.append(item.outerHTML);                         //
});                                                           // ...to this line

// check whether style should be applied
if (styleSheet) {
    var styles = loadStyles([styleSheet]);

    var defs = $('defs', svg);
    if (!defs.length) {
        svg.prepend('<defs></defs>');
        defs = $('defs', svg).first();
    }

    var style = $('style', defs);
    if (!style.length) {
        defs.prepend('<style type="text/css"></style>');
        style = $('style', defs).first();
        style.html(styles);
    }
}

var serializer = new XMLSerializer();
var svgStr = serializer.serializeToString(svg[0]);

var canvas = $('#hiddenCanvas')[0];
canvas.width = width;
canvas.height = height;

canvg(canvas, svgStr,
    {
        ignoreDimensions: true, //does not try to resize canvas
        scaleWidth: width,
        scaleHeight: height,
        renderCallback: function () {
            var pngImg = canvas.toDataURL("image/png");
            func(pngImg.substring(22));
        }
    }
);

不幸的是,这不起作用,如下所示:

enter image description here

我不确定我在这里遗失的是什么(或者这根本不可能......)。非常感谢任何投入。

谢谢。

0 个答案:

没有答案
相关问题