Mam następujący problem: Konwertuję wykres svg stworzony przez d3.js, ale png jest zupełnie inny niż svg. SVG przed konwersją Dodawanie stylu CSS podczas konwersji svg na png
Jak mogę zastosować ten sam kod .css z przeliczaniem? Czy mimo to można utworzyć łącze do pliku .css, np. Podczas tworzenia plików svg?
svgtopng.js Kod:
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);
kod 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;
}
kod HTML:
<button id="save">Save as Image</button></h1>
<div id="svgdataurl"></div>
<span id="h3">
</span>
Nie jestem ekspertem, ale może można spróbować inną bibliotekę jak https://github.com/exupero/saveSvgAsPng – makshh
Próbowałem tego, ale niestety nie działa;/ –