SVG新手在这里。我尝试进行增强,其中在将SVG地图转换为PNG期间包含国家/地区标签(<div>
)。
要转换的地图如下所示:
这就是DOM中的样子。要包含的div
标签会突出显示。
这是我迄今为止所尝试过的:
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));
}
}
);
不幸的是,这不起作用,如下所示:
我不确定我在这里遗失的是什么(或者这根本不可能......)。非常感谢任何投入。
谢谢。