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

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

HTML代码：

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

另存为图像

本质上，您需要在元素上“内联”移动样式。例如，您的

g

轴路径来自：

<g class="x axis" transform="translate(0,450)">
  <path class="domain" d="M0,6V0H440V6"></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;
    }
  });

d3.选择全部（'.axis path、.axis line、.axis'）。每个（函数（）{
var元素=这个；
var computedStyle=getComputedStyle（元素，null）；
对于（var i=0；i

完整工作示例：

.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}
另存为图像
var保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=500-边距。左侧-边距。右侧，
高度=500-margin.top-margin.bottom；
var x=d3.scale.linear（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3。选择（#h3”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
x、 域（[01100]）；
y、 域（[01100]）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.样式（“文本锚定”、“结束”）；
d3.选择（“保存”）。在（“单击”，函数（）上{
d3.选择所有（'.axis path、.axis line、.axis'）。每个（函数（）{
var元素=这个；
var computedStyle=getComputedStyle（元素，null）；
对于（var i=0；i

我不是专家，但也许你可以尝试不同的库，就像我尝试这个一样，但不幸的是不起作用/非常感谢你。我手动转换了样式，效果很好，但实际上没有效果；/遗憾的是，d3.js中没有链接到外部css文件的选项

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