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

【问题标题】：How to include <div> labels when converting SVG to PNG将 SVG 转换为 PNG 时如何包含 <div> 标签
【发布时间】：2018-05-10 15:14:05
【问题描述】：

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));
        }
    }
);

不幸的是，这不起作用，如下所示：

我不确定我在这里缺少什么（或者这是否可能......）。任何意见将不胜感激。

谢谢。

【问题讨论】：

对我来说似乎是个坏习惯。你真正想达到什么目标？
您的 div 不是 svg 的一部分 - 只需将它们包含在新图像下方？另外，我认为您不能将 div 附加到 svg。转换的任何原因？
嗨@Pete，感谢您的回复。所以这在技术上是不可能的吗？如果是这种情况，用<g> 替换<div> 会起作用吗？在此之前我没有使用过 SVG，所以我正在使用我目前理解的内容......编辑：我建议用 <g> 替换，因为我在检查时看到 <g> 被列为孩子DOM。
SVG 是一个图像元素/图像处理元素，它非常独立且可扩展，所以我再次问这个问题，有什么理由将其转换为 png？
用于分享。该页面具有一个功能，用户可以在该站点的论坛中将地图图像作为帖子共享。它还可以选择将地图导出为 PDF 文件。

标签： javascript jquery html angularjs svg

【解决方案1】：

Div 不是有效的 SVG 子元素，因此无法将它们移入 SVG。

您应该通过将 div 元素转换为 <text> 元素来将 div 中的文本移动到 SVG 中。使用文本元素的 x 和 y 属性在 SVG 中定位标签。

【讨论】：