Updates as per Team meeting 28 Aug 2025

savesvg.js

@@ -57,7 +57,7 @@ function doLittleWhiteTriangle(id){
 
 
 
-
+/*
 function inlineStyles(svgElement) {
     const allElements = svgElement.querySelectorAll('*');
     const computedStyles = window.getComputedStyle(svgElement);
@@ -78,9 +78,46 @@ function inlineStyles(svgElement) {
     });
   }
 
+*/
+
+function inlineStyles(svgElement) {
+  const allElements = svgElement.querySelectorAll('*');
+
+  allElements.forEach(el => {
+    const computed = window.getComputedStyle(el);
+    const style = [];
+
+    for (let i = 0; i < computed.length; i++) {
+      const key = computed[i];
+      let value = computed.getPropertyValue(key);
+
+      // Replace currentColor with resolved color
+      if (value === 'currentcolor') {
+        value = computed.color;
+      }
+
+      style.push(`${key}:${value};`);
+    }
+
+    el.setAttribute('style', style.join(' '));
+  });
+
+  // Also inline root <svg>
+  const svgComputed = window.getComputedStyle(svgElement);
+  let rootStyle = '';
+  for (let i = 0; i < svgComputed.length; i++) {
+    const key = svgComputed[i];
+    let value = svgComputed.getPropertyValue(key);
+    if (value === 'currentcolor') {
+      value = svgComputed.color;
+    }
+    rootStyle += `${key}:${value};`;
+  }
+  svgElement.setAttribute('style', rootStyle);
+}
 
 
-
+/*
 function makeSvgRightClickable(id) {
     const svg = document.getElementById(id);
     inlineStyles(svg);
@@ -101,10 +138,48 @@ function makeSvgRightClickable(id) {
     img.alt = "Right-click to save SVG image";
   
     // Replace or insert after SVG
-    svg.style.display = "none";  // hide original
+    //svg.style.display = "none";  // hide original
     svg.parentNode.insertBefore(img, svg.nextSibling);
-  }
+}
   
   // Call the function after D3 has drawn the SVG
   //makeSvgRightClickable("id");
-  
+*/
+
+
+function makeSvgRightClickable(id) {
+    const svg = document.getElementById(id);
+    inlineStyles(svg);
+
+    // Set namespace
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+    // Ensure width and height are set
+    if (!svg.hasAttribute("width")) svg.setAttribute("width", svg.getBoundingClientRect().width);
+    if (!svg.hasAttribute("height")) svg.setAttribute("height", svg.getBoundingClientRect().height);
+
+    // Serialize
+    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.getAttribute("width");
+    img.height = svg.getAttribute("height");
+    img.alt = "Right-click to save SVG image";
+   
+    if (svg.classList.contains("pyramid")) {
+        img.classList.add("pyramid");
+    }
+
+    if (svg.classList.contains("triangle")) {
+        img.classList.add("triangle");
+    }
+ 
+    svg.style.display = "none";
+    svg.parentNode.insertBefore(img, svg.nextSibling);
+}
+
+