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

Question

I have the following problem: I am converting the svg plot created by d3.js but the png is completely different from svg. 我有以下问题：我正在转换由d3.js创建的svg图，但png与svg完全不同。 SVG before converting 转换前的SVG

PNG after converting: 转换后的PNG：

How can I apply the same .css code to the convertion? 如何将相同的.css代码应用于转换？ Is there anyway to link to the .css file like when creating svg's? 反正有没有像创建svg那样链接到.css文件？

svgtopng.js code: 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 code: 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 CODE: HTML代码：

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

Answer 1

Essentially, you need to move the styles "inline" on the elements. 基本上，您需要在元素上移动“内联”样式。 Your g axis path for example goes from: 您的g轴路径例如来自：

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

To: 至：

<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>

There's some recursion tricks out there to do this but full recursion across all the elements is probably a bit of overkill (and gonna be slow). 有一些递归技巧可以做到这一点但是所有元素的完全递归可能有点过分（并且会很慢）。

I would either manually move the styles in line or do something to target the elements you care about. 我会手动移动样式或做一些事情来定位你关心的元素。 For instance, here's how your could fix the axis lines: 例如，以下是您可以修复轴线的方法：

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

Full working example: 完整的工作示例：

 <!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>

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-10-17 18:16:30

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-10-17 18:16:30

解决方案1
4 已采纳 2015-10-17 18:16:30