Question

请帮我解决以下问题。我正在创建一个包含大量文本元素的SVG元素，如下所示：

<text text-anchor="middle" transform="translate(-13,170)rotate(0)" style="font-size: 67px; font-family: cursive; fill: rgb(140, 86, 75);">some text</text>

然后我尝试使用此功能将此SVG保存为PNG图像：

function saveImage(svg) {
    var link = document.createElement("a"),
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        svg_xml = (new XMLSerializer()).serializeToString(svg),
        image = new Image();

    canvas.width = opts.width; // from configuration, the svg was created with these sizes too
    canvas.height = opts.height;

    image.src = "data:image/svg+xml;base64," + window.btoa(window.unescape(encodeURIComponent(svg_xml)));
    ctx.drawImage(image, 0, 0);
    document.body.appendChild(link);
    link.href = canvas.toDataURL();
    link.download = "some_name.png";
    link.click();
    document.body.removeChild(link);
}

有效。但尽管事实上所有的文本元素都有＆＃34; font-family：cursive;＆＃34;或其他字体 - 在png上它总是sans-serif。＆＃34;字体大小＆＃34;没问题，＆＃34;填写＆＃34;没关系，但＆＃34; font-family＆＃34;不是以某种方式。

知道为什么会这样吗？

感谢。

从SVG转换时，PNG图像上绘制的字体不正确

0 个答案: