0
274
Vistassave-svg-as-png not loading the svg css, while downloading the svg as png
I am using save-svg-as-png module to download generated svg from d3 hierarchy tree to png.
Below is the svg generated in browser
But when I download it, some css are missing due to which graph is unreadable
Below is the code i am using to download
var saveSvgToPng = document.getElementById("download-button");
saveSvgToPng.onclick = function () {
saveSvgAsPng(d3.select('svg').node(), "dia.png", {
scale: 2,
});
};
How do I resolve this issue.
Thanks in advance!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
To all who are facing this issue. As suggested by @RobertLongson in the comment, it worked when I switched to inline css instead of external css.
Code with external css which was causing the issue
nodes
.append("text")
.attr("font-size", "12px")
.attr("text-anchor", "middle")
.text(function (d) {
return `${d.data.name}`
})
External css
text {
text-shadow: -1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white,
1px 1px 3px white;
cursor: pointer;
font-family: "Playfair Display", serif;
}
Code with inline css, which fixed the issue
nodes
.append("text")
.attr("font-size", "12px")
.attr("text-anchor", "middle")
.style(
"text-shadow",
`-1px -1px 3px white, -1px 1px 3px white, 1px -1px 3px white,
1px 1px 3px white`
)
.style("cursor", "pointer")
.style("font-family", `"Playfair Display", serif`)
.text(function (d) {
return `${d.data.name}`
})
Hope this helps someone!
·
Juan Pablo Isaza
Denunciar
Responde la pregunta