帶有嵌入式樣式表的SVG到PNG

Question

我對從SVG創建PNG感興趣。 我遵循以下給出的代碼：

https://developer.mozilla.org/zh-CN/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

但是由於CSS的樣式，圖片無法正確顯示。 我制作了一個本地CSS文件，並導入了SVG，如下所述：

如何將樣式應用於嵌入式SVG？

但是它似乎沒有使用樣式表。 任何想法為什么我會有這個錯誤？

謝謝。

Answer 1

看看PhantomJS-您需要先安裝它，然后編寫自己的腳本或按照以下方式運行某些程序：

phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png

您還可以保存為PDF，設置縮放設置等。

Answer 2

您可以使用html2canvas從任何dom元素（包括svg元素）生成畫布。

但是，樣式表中定義的svg元素的樣式定義不會應用於生成的畫布。 可以通過在調用html2canvas之前將樣式定義添加到svg元素來進行修補。

受本文啟發，我創建了以下代碼：

function generateStyleDefs(svgDomElement) {
  var styleDefs = "";
  var sheets = document.styleSheets;
  for (var i = 0; i < sheets.length; i++) {
    var rules = sheets[i].cssRules;
    for (var j = 0; j < rules.length; j++) {
      var rule = rules[j];
      if (rule.style) {
        var selectorText = rule.selectorText;
        var elems = svgDomElement.querySelectorAll(selectorText);

        if (elems.length) {
          styleDefs += selectorText + " { " + rule.style.cssText + " }\n";
        }
      }
    }
  }

  var s = document.createElement('style');
  s.setAttribute('type', 'text/css');
  s.innerHTML = "<![CDATA[\n" + styleDefs + "\n]]>";
  //somehow cdata section doesn't always work; you could use this instead:
  //s.innerHTML = styleDefs;

  var defs = document.createElement('defs');
  defs.appendChild(s);
  svgDomElement.insertBefore(defs, svgDomElement.firstChild);
}

// generate style definitions on the svg element(s)
generateStyleDefs(document.getElementById('svgElementId'));

// after generating the style defintions, call html2canvas
html2canvas(document.getElementById('idOfElement')).then(function(canvas) {
  document.body.appendChild(canvas);
});

Answer 3

的例子

“如何將樣式應用於嵌入式SVG？” 正如您提到的應該工作。 測試它時，需要在此代碼行中定義youObjectElement。

var svgDoc = yourObjectElement.contentDocument;

再試一次。