我正在尝试生成一些SVG并允许我网站的用户将这些SVG下载为PNG 阅读this后,我将所有外部图像都包含在下载的PNG中 现在我试图让PNG上的字体正确。 This似乎回答了这个问题,所以我补充道:
<defs>
<style type="text/css">
@font-face {
font-family: Parisienne;
src: url('data:application/font-woff;charset=utf-8;base64,.....')
}
</style>
</defs>
其中.....
是base64编码的woff2字体。然后在文本中使用它:
<text x="55" y="55" stroke="red" font-family="Parisienne">Blah</text>
字体在浏览器中正确显示(我还没有将其安装在我的操作系统上),但它仍未包含在PNG中。
我是否必须在第一个链接中使用的脚本中添加一些额外的处理?
谢谢。
- EDIT--
我被要求提供一个完整的例子,这里是:
<svg id="generated-svg" class="generated-svg" width="300px" height="500px"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
@font-face {
font-family: Parisienne;
src: url('data:application/font-woff;charset=utf-8;base64,.....')
}
</style>
</defs>
<rect width="300" height="500" fill="#222"/>
<text x="55" y="55" stroke="red" font-family="Parisienne" font-size="20px">Test text</text>
</svg>
我还没有添加base64编码字体,因为它太大了。但您可以编码您喜欢的任何字体并替换......
。我正在使用Parisienne
这里有jsfiddle与实际字体:https://jsfiddle.net/z8539err/
在我的浏览器中,这是输出:
答案 0 :(得分:2)
我可以使用以下代码在png中包含该字体,试一试
var svg = document.getElementById('generated-svg');
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 500;
var ctx = canvas.getContext("2d");
//display image
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
//image link
console.log( canvas.toDataURL( "image/png" ) );
//open image
window.location.href=canvas.toDataURL( "image/png" );
};
答案 1 :(得分:0)
GitHub上的一个有效的概念证明项目,用于解决OP问题声明。
https://github.com/nirus/SVG-PNG-Convert
内置了通用Javascript模块,可以在任何地方进行修改和使用。阅读文档。试试看!