将svg转换为png时添加css样式 [英] Adding css style when converting svg to png

问题描述

我有以下问题：我转换由d3.js创建的svg图，但png完全不同于svg。
SVG，然后转换

转换后的PNG： p>

如何应用相同的.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）
 //这里用.style我想链接所有的css类从.css文件下面// 
 .node（）。parentNode.innerHTML; 
 
 var imgsrc ='data：image / svg + xml; base64， '+ btoa（html）; 
 var img ='< img src ='+ imgsrc +'>'; 
 d3.select（＃svgdataurl）。html（img）; 
  

css代码：

 code> body {
 font-family：'Helvetica Neue'，'Helvetica'，'Arial'，sans-serif; 
 padding-left：10px; 
 color：＃222 ; 
} 
 / *直方图线区域* / 
。直方图{
形状渲染：crispEdges; 
} 
 .LineChart .line { 
 stroke-width：2px; 
} 
 / * 2D直方图箱* / 
 .Histogram2D .tile {
 shape-rendering：crispEdges; 
} 
 / *错误栏* / 
 .uncertainty {
 stroke-width：1px; 
 shape-rendering：crispEdges; 
} 
 / * Axes * / 
 .axis路径{
 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 .extent {
 fill：＃000; 
 fill-opacity：0.125; 
 stroke：＃000; 
 stroke-opacity：0.2; 
 stroke-width：1px; 
 shape-rendering：crispEdges; 
} 
 / *'清除缩放'文本* / 
 .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>另存为图片< / button>< / h1> 
< div id =svgdataurl>< / div> 
< span id =h3> 
< / span> 
  

解决方案

基本上，你需要移动样式上的元素。您的 g 轴路径例如：

 < g class =x axistransform =translate（0,450）> 
< path class =domaind =M0,6V0H440V6>< / path> 
< / g> 
  

To：

 code>< g class =x axistransform =translate（0,450）> 
< path class =domaind =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; 
} 
}）; 
  

全功能示例：

 <！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>另存为图片< / 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） y，6）.attr（dy，.71em）.style（text-anchor，end）; d3.select（＃save）。on（click，function（）{d3.selectAll（'。axis path，.axis line，.axis'）。 calculateStyle = getComputedStyle（element，null）; for（var i = 0; i< computedStyle.length; i ++）{var property = computedStyle.item（i）; var value = computedStyle.getPropertyValue（property）; element.style [属性] = value;}}）; var html = d3.select（'＃h3 svg'）.attr（version，1.1）.attr（xmlns，http://www.w3.org/2000 / svg）//这里我使用.style尝试，但我想链接来自.css文件下面的所有css类// .node（）。parentNode.innerHTML; var imgsrc ='data：image / svg + xml; base64，'+ btoa（html）; var img ='< img src ='+ imgsrc +'>'; d3.select（＃svgdataurl）。html（img）;}）; < / script>  

I have the following problem: I am converting the svg plot created by d3.js but the png is completely different from svg. SVG before converting

PNG after converting:

How can I apply the same .css code to the convertion? Is there anyway to link to the .css file like when creating svg's?

svgtopng.js code:

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:

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:

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

解决方案

Essentially, you need to move the styles "inline" on the elements. Your g axis path for example goes from:

<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样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！