javascript - 字体未应用于图像

Question

我正在尝试使用 d3.js 和 HTML5 将 SVG 转换为 PNG。显示图像时，会在其上应用自定义字体，但是当我将图像另存为 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> 加载之外，这将起作用。 (图像())。由于浏览器中的安全限制，SVG 加载为 <img> 必须是独立的。它们不能引用外部对象(例如字体文件)。

解决方案是将 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>

我相信这应该有效。