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

【问题标题】：Adding css style when converting svg to png将svg转换为png时添加css样式
【发布时间】：2016-01-16 07:53:52
【问题描述】：

我有以下问题：我正在转换由 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>

【问题讨论】：

我不是专家，但也许您可以尝试不同的库，例如 github.com/exupero/saveSvgAsPng
我正在尝试这个，但不幸的是不起作用；/

标签： javascript html css d3.js svg

【解决方案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>

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

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

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

完整的工作示例：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

  .axis {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .x.axis path {
    display: none;
  }
</style>

<body>

  <button id="save">Save as Image</button>

  <div id="svgdataurl"></div>

  <span id="h3">
  </span>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script>
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = 500 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
      .range([0, width]);

    var y = d3.scale.linear()
      .range([height, 0]);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

    var svg = d3.select("#h3").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain([0, 100]);
    y.domain([0, 100]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

    d3.select("#save").on("click", function() {

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

      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);
    });
  </script>

【讨论】：

非常感谢。我手动转移了样式，它可以工作，但它真的无效；/ 很遗憾，d3.js 中没有选项可以链接到外部 css 文件