css - 带有嵌入式样式表的 SVG 到 PNG

Question

我对从 SVG 创建 PNG 感兴趣。我遵循了以下代码：

https://developer.mozilla.org/en-US/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;

再试一次。