0
267
Viewssave-svg-as-png no carga el svg css, mientras descarga el svg como png
Estoy usando el módulo save-svg-as-png para descargar svg generado del árbol de jerarquía d3 a png.
A continuación se muestra el svg generado en el navegador
Pero cuando lo descargo, faltan algunos css debido a que el gráfico es ilegible
A continuación se muestra el código que estoy usando para descargar
var saveSvgToPng = document.getElementById("download-button"); saveSvgToPng.onclick = function () { saveSvgAsPng(d3.select('svg').node(), "dia.png", { scale: 2, }); };¿Cómo resuelvo este problema?
¡Gracias por adelantado!
·
Juan Pablo Isaza
1 answers
Answer question0
A todos los que se enfrentan a este problema. Como sugirió @RobertLongson en el comentario, funcionó cuando cambié a CSS en línea en lugar de CSS externo.
Código con css externo que estaba causando el problema
nodes .append("text") .attr("font-size", "12px") .attr("text-anchor", "middle") .text(function (d) { return `${d.data.name}` })CSS externo
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; }Código con css en línea, que solucionó el problema
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}` })¡Espero que esto ayude a alguien!
·
Juan Pablo Isaza
Report
Answer question