将svg转换为png时添加css样式

Question

我有以下问题:我正在转换由d3.js创建的svg图,但png与svg完全不同.转换前的SVG

转换后的PNG:

如何将相同的.css代码应用于转换？反正有没有像创建svg那样链接到.css文件？

svgtopng.js代码:

d3.select("#save").on("click", function(){
var html = d3.select('#h3 svg')
    .attr("version", 1.1)
    .attr("xmlns", "http://www.w3.org/2000/svg")
    //HERE I WAS TRYING WITH .style but I want to link all the css classes from .css file below//
    .node().parentNode.innerHTML;

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">'; 
d3.select("#svgdataurl").html(img);

css代码:

body {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
padding-left: 10px;
color: #222;
}
/* Histogram line areas */
.Histogram .line {
  shape-rendering: crispEdges;
}
.LineChart .line {
  stroke-width: 2px;
}
/* 2D Histogram bins */
.Histogram2D .tile {
  shape-rendering: crispEdges;
}
/* Error bars */
.uncertainty {
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
/* Axes */
.axis path {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
.axis .tick line {
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
.grid {
  fill: none;
  stroke: #e0e0e0;
  shape-rendering: crispEdges;
}
.axis-label {
  font-size: 0.9em;
}
/* TextBox */
.TextBox rect {
  shape-rendering: crispEdges;
}
/* Brush, i.e. zoom box */
.brush .extent {
  fill: #000;
  fill-opacity: 0.125;
  stroke: #000;
  stroke-opacity: 0.2;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
/* 'Clear zoom' text */
.clear-button {
  cursor: pointer;
}
.clear-button rect {
  fill: #eee;
  stroke: #000;
  stroke-width: 1px;
  stroke-opacity: 0.125;
  border-radius: 2px;
}
.clear-button:hover rect {
  fill: #e4e4e4;
}
.clear-button:active rect {
  fill: #ddd;
}

.zscale-box {
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

HTML代码:

<button id="save">Save as Image</button></h1>
<div id="svgdataurl"></div>
  <span id="h3">
  </span>

Answer 1

本质上，您需要在元素上“内联”移动样式。例如，您的g轴路径来自：

<g class="x axis" transform="translate(0,450)">
  <path class="domain" d="M0,6V0H440V6"></path>
</g>

到：

<g class="x axis" transform="translate(0,450)">
  <path class="domain" d="M0,6V0H440V6" 
    style="fill: none; stroke: #000; stroke-width: 1px; shape-rendering: crispEdges;">
  </path>
</g>

有一些递归技巧可以做到这一点，但所有元素的完全递归可能有点矫枉过正（而且会很慢）。

我要么手动移动样式，要么做一些事情来定位您关心的元素。例如，以下是修复轴线的方法：

d3.selectAll('.axis path, .axis line, .axis').each(function() {
    var element = this;
    var computedStyle = getComputedStyle(element, null);
    for (var i = 0; i < computedStyle.length; i++) {
      var property = computedStyle.item(i);
      var value = computedStyle.getPropertyValue(property);
      element.style[property] = value;
    }
  });

完整的工作示例：

<g class="x axis" transform="translate(0,450)">
  <path class="domain" d="M0,6V0H440V6"></path>
</g>