svgをpngに変換するときのCSSスタイルの追加

私は以下の問題があります：d3.jsによって作成されたsvgプロットを変換していますが、pngはsvgとはまったく異なります。 SVG変換後 svgをpngに変換するときのCSSスタイルの追加

PNGを変換する前に：

を私はconvertionに同じの.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>

出典

2015-10-17 Mateusz Mateja

：

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

全作業例：たとえば、ここにあなたが軸ラインを修正することができる方法ですhttps://github.com/exupero/saveSvgAsPng – makshh

私はこれを試していたが、残念ながらうまくいきませんでした;/ –

基本的に、あなたが要素にスタイルを "インライン" に移動する必要があります。

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

：例えばあなた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これを行うにはそこですが、すべての要素間の完全な再帰は、おそらくやり過ぎのビット（及びつもりです遅くなる）。

私は手動でスタイルを行に移動するか、気になる要素をターゲットにする何かをします。私は専門家ではないんだけど、多分あなたのような別のライブラリを試すことができ

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

出典

2015-10-17 18:16:30 Mark

ありがとうございました。手動でスタイルを移しても動作しますが、実際には効果がありません;/d3.jsには外部のcssファイルにリンクするオプションがないことが残念です –

svgをpngに変換するときのCSSスタイルの追加

答えて

関連する問題