具有base64嵌入字体的序列化SVG图片,无法在IE Edge中正确呈现

时间:2019-07-20 07:58:31

标签: javascript html internet-explorer svg microsoft-edge

编辑:Issue reported to microsoft

我有一个内联svg元素,该元素带有作为base64字符串(.woff格式)嵌入的自定义字体。

我使用javscript序列化SVG元素,并将其用作 img 元素的源。 Jsbin Link

var svg = document.querySelector('svg');
var svgData = new XMLSerializer().serializeToString(svg);
var img = document.createElement("img");
img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
document.body.appendChild(img);
svg { width: 400px; max-width:calc(100% - 100px); height: auto; }
img { width: 400px; max-width:calc(100% - 100px); height: auto; }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>

<body>
    <svg viewBox="0 -23 90 33" width="723" height="276">
        <defs>
            <style type="text/css">
                @font-face {
                    font-family: 'Butcherman';
                    src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
                }
            </style>
        </defs>
        <text x="0.5" y="1" font-size="30" fill="#432329" stroke="#000000" stroke-width="1.2" paint-order="stroke"
            font-weight="normal" letter-spacing="1" font-family="Butcherman">Hello</text>
    </svg>
    <br />
</body>

</html>

自定义字体可以在Chrome,Firefox,IE 11中正确显示,但不能在Edge中显示。

enter image description here

我错过了什么吗?我该怎么做才能使自定义字体在Edge中正确呈现?

0 个答案:

没有答案