logo标签列表

SVG嵌入式样式表转PNG

csshtmlcanvassvgd3.js
4
1
为什么不在Photoshop中完成呢？ - dezman
我知道我可以找到一种方法来保存SVG文件，将其加载到Inkscape中，编辑Chrome和Inkscape渲染之间的所有错误，并保存为PNG格式。我正在使用SVG，因为我是通过D3创建图表，所以我正在使用Web服务。我想保存创建的静态SVG的漂亮图片（而不是屏幕截图）。CSS样式没有被应用，我在第二个链接中使用了<link>方法。 - Justin
这个问题有什么进展吗？我也在寻找解决方案。 - 111
@glyph 我有点放弃了，没有很深入地研究它。你看过 http://nytimes.github.io/svg-crowbar/ 吗？我试玩过它，似乎可以正常工作。 - Justin
没见过这个。仅支持Chrome对于我的应用程序不起作用，但我正在尝试这个：http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/ - 谢谢。 - 111
显示剩余2条评论
3个回答
0

看一下PhantomJS - 你需要安装它，然后编写自己的脚本或运行类似以下代码：

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

您还可以保存为PDF，设置缩放等。

0

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

但是，样式表中定义的svg元素的样式定义不会应用于生成的画布。这可以通过在调用html2canvas之前向svg元素添加样式定义来修补。

受this article的启发，我创建了这个：

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);
});
-1

正如您提到的，“如何将样式应用于嵌入式SVG？”的示例应该可以工作。在测试代码时，您需要在此行代码中定义youObjectElement。

var svgDoc = yourObjectElement.contentDocument;

请再试一次。

1
我可以生成图像，但CSS没有被正确应用。我是从D3.js创建的SVG渲染的。 - Justin
我通常只是在小屏幕上使用并为其设置样式。你试过按照这篇文章做吗？https://dev59.com/S2ct5IYBdhLWcg3wmOZN 。这可能是一个不错的方法。 - Bew Promtong
我基本上做了所有正确的事情，我相信CSS和SVG之间只是存在一些限制。有些东西看起来很好。此外，不可见的对象（例如用于缩放的矩形）是否会隐藏在其下面的对象？ - Justin
你是想要制作交互式SVG吗？我不确定你的意思。 - Bew Promtong
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接