diff --git a/src/assets/utils.ts b/src/assets/utils.ts index fb8d8b4..cfcb671 100644 --- a/src/assets/utils.ts +++ b/src/assets/utils.ts @@ -28,8 +28,10 @@ export function downloadSVGasPNG(filename: string, svgSelector: string): void { return; } - const svgData = new XMLSerializer().serializeToString(svgElem); - // svgData = '\r\n' + svgData; + let svgData = new XMLSerializer().serializeToString(svgElem); + svgData = '\r\n' + svgData; + svgData = insertStyleSheets(svgData); + // downloadText(filename.replace("png", "svg"), svgData); const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }); const DOMURL = window.URL || window.webkitURL || window; @@ -39,7 +41,7 @@ export function downloadSVGasPNG(filename: string, svgSelector: string): void { img.onload = () => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); - const domRect = (svgElem as SVGGraphicsElement).getBBox(); + const domRect = svgElem.getBoundingClientRect(); canvas.width = domRect.width; canvas.height = domRect.height; ctx?.drawImage(img, 0, 0, domRect.width, domRect.height); @@ -58,4 +60,27 @@ export function downloadSVGasPNG(filename: string, svgSelector: string): void { img.src = svgUrl; } +function insertStyleSheets(svgData: string): string { + // based on https://stackoverflow.com/a/41346127/1140589 + let styleStr = ""; + + // svgData. + return svgData.replace(/]*)>/, "" + styleStr); +} + export const SYMBOL_DECEASED = "+"; // "💀"; diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue index 7257ce5..49b1ca1 100644 --- a/src/components/NetworkMap.vue +++ b/src/components/NetworkMap.vue @@ -341,7 +341,10 @@ export default defineComponent({