Hinzufügen von CSS-Stil beim Konvertieren von SVG nach PNG

Ich habe das folgende Problem: Ich konvertiere die Svg-Plot erstellt von d3.js aber das PNG ist völlig anders als Svg. SVG vor der Konvertierung Hinzufügen von CSS-Stil beim Konvertieren von SVG nach PNG

PNG nach der Konvertierung:

Wie kann ich den gleichen CSS-Code an die convertion bewerben? Gibt es sowieso eine Verbindung zur .css-Datei, wie beim Erstellen von 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>

Quelle

2015-10-17 Mateusz Mateja

Ich bin kein Experte, aber vielleicht können Sie verschiedene Bibliothek versuchen, wie https://github.com/exupero/saveSvgAsPng – makshh

Ich habe das versucht, funktioniert aber leider nicht;/ –

Im Wesentlichen müssen Sie die Stile "inline" auf die Elemente bewegen . Ihr g Achsenbahn zum Beispiel geht aus:

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

An:

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

Es gibt einige Rekursion tricks gibt diese aber voll Rekursion über alle Elemente zu tun, ist wahrscheinlich ein bisschen viel des Guten (und werde langsam sein).

Ich würde entweder manuell die Stile in der Zeile verschieben oder etwas tun, um die Elemente, die Ihnen wichtig sind, zu zielen. Zum Beispiel ist hier, wie Ihr die Achslinien beheben könnte:

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

Vollarbeitsbeispiel:

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

Quelle

2015-10-17 18:16:30 Mark

Vielen Dank. Ich habe die Stile manuell übertragen und es funktioniert, aber es ist wirklich uneffektiv;/Es ist schade, dass es in d3.js keine Option gibt, die externe CSS-Datei zu verknüpfen –

Hinzufügen von CSS-Stil beim Konvertieren von SVG nach PNG

Antwort

Verwandte Themen