Question

我正在尝试使用SVG和PNG将d3.js转换为HTML5。显示图像时，会在其上应用自定义字体，但是当我将图像另存为png时，该图像上不会应用字体。下面是我的代码

CSS

@font-face {
    font-family: "Calligraffitti";
    font-style: normal;
    font-weight: 400;
    src: local("Calligraffitti"), local("Calligraffitti-Regular"), url("http://fonts.gstatic.com/s/calligraffitti/v7/vLVN2Y-z65rVu1R7lWdvyKIZAuDcNtpCWuPSaIR0Ie8.woff") format("woff");
}

JS

 $('.savePNG').click(function() { saveSvgAsPng(document.getElementById("treeT"), "tree2.png", 3);
    out.saveSvgAsPng = function(el, name, scaleFactor) {
    out.svgAsDataUri(el, scaleFactor, function(uri) {

      var image = new Image();
      image.src = uri;

      image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);

        var a = document.createElement('a');
        a.download = name;
        a.id        = "download_link";
        a.href = canvas.toDataURL('image/png');
        document.body.appendChild(a);
        a.click();
      }
    });
  }

Answer 1

你在哪个文件中放了你发布的CSS？如果它在您的HTML中，或者从您的HTML文件中引用，那么您就不走运了，因为CSS不适用于文档边界。所以它不会影响单独的SVG文件。

理论上你可以把CSS放在SVG文件中。除了您将SVG加载为<img>（Image（））之外，这将起作用。由于浏览器中的安全限制，作为<img> 加载的SVG必须是自包含的。它们不能引用外部对象（例如字体文件）。

解决方案是将CSS嵌入到SVG文件中和使用dataURI来引用字体。

<defs>
  <style type="text/css"><![CDATA[
    @font-face {
      font-family: "Calligraffitti";
      font-style: normal;
      font-weight: 400;
      src: local("Calligraffitti"), local("Calligraffitti-Regular"), url("data:application/font-woff;base64,...font.file.encoded.as.base64...") format("woff");
    }
  ]]></style>
</defs>

我相信这应该有用。

字体未应用于图像

1 个答案: