如何从复杂的svg正确生成画布

Question

我试图从我的网站导出一个复杂的SVG块（用c3生成）作为图像（不管是png，svg，pdf，此时我对任何可以解决它的问题都是开放的，虽然矢量格式是理想的）。我曾尝试过html2canvas，canvg，jsPDF以及该团伙的所有酷孩子。问题是：我的一个情节搞砸了。线变成了区域，区域变成了颜色，颜色被破坏了......你说出来了。

我远非成为js专家。我刚来到这里，我找到了自己的方式，有些人请耐心等待。

我不知道这是一个CSS问题还是什么。是的，我们确实有html背后的CSS。

我的临时解决方案是使用jQuery.print.js来调用我的div的打印。由于许多原因，这远非理想：

没有bbox。它生成的PDF的页面大小由用户定义，而不是图像大小;
我正在使用自动调整大小的自举卡。每当按下“打印图像”时，打印使用当前的尺寸。我已经尝试隐藏卡片来重新缩放目标，但调整大小只会在打印电话之后进行，原因我不知道。这个问题已经解决了，这个临时解决方案会更好，尽管还是一个临时解决方案。

所以，一个问题是：

如何显示SVG？
或者，如何在调用打印之前调整卡的大小？
或者，如何在没有从canvg / jsPDF获得的格式错误的情况下生成栅格（png / jpeg）？

现在进行打印调用的函数是：

function getscreenshot(div) {
  // Hide row pair:
  $('#map-card').addClass('hidden');

  // Temporarily change class attr to spawn all row:
  var divClass = $(div).attr('class');
  $(div).attr('class', 'col');

  // ****PROBLEM****
  // Div size is not upated before calling print()
  // causing the print to have the size as displayed on user screen
  // How to refresh it before print?
  // ********

  // jQuery.print solves it in a non-ideal way, since user has to set save as file and so on
  $(div).print();

  // This solution with jsPDF produces **ugly as hell** image:
  // var pdf = new jsPDF('landscape');
  // pdf.addHTML(document.getElementById(div), function() {
  //     pdf.save(name + 'pdf');
  // });

  // Recover original size after print:
  // Restore row pair and div original state:
  $('#map-card').removeClass('hidden');
  $(div).attr('class', divClass);
}

这是网页上显示的一排卡片：

右边的情节是我正在关注我的试验，以及正在完成未编辑的那个。使用canvg.js查看使用html2canvas，jsPDF等产生的结果与fiddle with SVG pasted中出现的相同误解结果

PS：是的，我确实搜索了很多。这就是我最终尝试html2canvas，canvg，jsPDF，jqprint，...

干杯!

Answer 1

另一答案