function inlineStyles(svgElement) { const allElements = svgElement.querySelectorAll('*'); const computedStyles = window.getComputedStyle(svgElement); // Apply style to root SVG element svgElement.setAttribute("style", computedStyles.cssText || ""); // Recursively apply computed styles to each element allElements.forEach(el => { const computed = window.getComputedStyle(el); let inline = ''; for (let i = 0; i < computed.length; i++) { const key = computed[i]; const value = computed.getPropertyValue(key); inline += `${key}:${value};`; } el.setAttribute('style', inline); }); } function makeSvgRightClickable(id) { const svg = document.getElementById(id); inlineStyles(svg); // Ensure SVG has proper namespace svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); // Serialize SVG const svgData = new XMLSerializer().serializeToString(svg); const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }); const url = URL.createObjectURL(svgBlob); // Create image element const img = document.createElement("img"); img.src = url; img.width = svg.width.baseVal.value; img.height = svg.height.baseVal.value; img.alt = "Right-click to save SVG image"; // Replace or insert after SVG svg.style.display = "none"; // hide original svg.parentNode.insertBefore(img, svg.nextSibling); } // Call the function after D3 has drawn the SVG //makeSvgRightClickable("id");