html - 当放置在 数据 URI 或 中时，SVG 文件中缺少字体

Question

我正在检查 SVG 和 Canvas (html5) 中字体的使用。我已经在 urldata 中翻译了一个 svg 文件。我得到了这个结果:

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjYxMiIgaGVpZ2h0PSIzOTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPkBpbXBvcnQgdXJsKGh0dHA6Ly8xMjcuMC4wLjE6ODAwMC9WZWdhRWRpdG9yL3N0YXRpYy9Nb2RlbGVQb2wvRGVzeXJlbC5jc3MpPC9zdHlsZT4KIDwvZGVmcz4KIDxnPgogIDx0aXRsZT5DYWxxdWUgMTwvdGl0bGU+CiAgPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMi42NDI4NiwgMCwgMCwgMi41MzMzMywgLTQ2MC41MiwgLTIxNi45NjcpIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMCIgeD0iMjc2Ljg1ODExIiB5PSIxNTQuNjA1MjYiIGlkPSJzdmdfMiIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkRlc3lyZWwiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHhtbDpzcGFjZT0icHJlc2VydmUiPmhlbGxvPC90ZXh0PgogPC9nPjwvc3ZnPg==

当我将所有内容复制并粘贴到地址浏览器(例如 Firefox、Chrome 示例)时，我可以使用 Desyrel 字体显示单词“hello”(如果您尝试这样做，则不会显示 Desyrel 字体)。另一方面，我尝试使用以下代码使用相同的 urldata dans le canvas (html5):

.............
                        var imageObj = new Image();

                imageObj.onload = function() {

                    context.drawImage(imageObj, 0, 0);

                 };
...........
         imageObj.src=urldata; 

在 Canvas (html5) 中，我也可以显示“hello”，但缺少 Desyrel 字体。我尝试了其他字体，结果是一样的。

有谁知道如何在 html5 Canvas 中显示所需的字体？我也试过了imageObj.src=我的文件.svg；再次不考虑字体。我认为 html5 canvas 可以显示 svg 图像，但是字体有问题吗？感谢您的回答，有什么解决办法吗？

Answer 1

图像必须是独立的，以防止隐私泄露。您的 base64 编码图像包含以下内容:

<style type="text/css">@import url(http://127.0.0.1:8000/VegaEditor/static/ModelePol/Desyrel.css)</style>

这不会工作，因为它会尝试访问图像文件之外的数据。您必须对 css 文件进行 url 或 base64 编码，并将其作为数据 url 嵌入到图像中，就像您对图像本身所做的那样。

一旦图像的所有数据都在一个文件中，它就应该可以工作了。