CODEWITHSUNDEEP
javascriptsvgexportpng
Sonia
Sonia

Reputation: 41

Issue Textpath svg to png

I'm working on an SVG graphic export (with d3.js library) to PNG. The problem is the label textPath. When exporting to PNG, the text does not appear. Does anyone know if there is solution for this problem?

The code I'm using to do the conversion is:

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg'));

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var png = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    a.download = "grafico.png";
    a.href = png;
    a.click();
    DOMURL.revokeObjectURL(png);
};
img.src = url;

Thank you very much to all. A greeting, Sonia

Upvotes: 3

Views: 379

Answers (2)

Sonia
Sonia

Reputation: 41

Fixed. I've solved with attributes in the css style-sheet such as:

font-size: 16px;
color: black;
fill: none;

Upvotes: 1

Quant
Quant

Reputation: 1645

Same issue here. It seems that this method of conversion is not getting the body's font-size. However, dumping the generated SVG into a .svg file and opening that file in the browser renders correctly.

Upvotes: 0

Related Questions