diff --git a/js/svg/main.js b/js/svg/main.js index 1a6c4b6..4ac2484 100644 --- a/js/svg/main.js +++ b/js/svg/main.js @@ -34,19 +34,14 @@ export default async (artboard, config) => { const rect = artboard.getBoundingClientRect(); [dimensions.width, dimensions.height] = [rect.width, rect.height]; - if (document.fullscreenEnabled || document.webkitFullscreenEnabled) { - window.ondblclick = () => { - if (document.fullscreenElement == null) { - if (artboard.webkitRequestFullscreen != null) { - artboard.webkitRequestFullscreen(); - } else { - artboard.requestFullscreen(); - } - } else { - document.exitFullscreen(); - } - }; - } + window.ondblclick = () => { + const blob = new Blob([artboard.querySelector("svg").outerHTML], { type: "image/svg+xml" }); + const url = URL.createObjectURL(blob); + const aTag = document.createElement("a"); + aTag.download = 'matrix.svg'; + aTag.href = window.URL.createObjectURL(blob); + aTag.click(); + }; const effectName = config.effect in effects ? config.effect : "palette"; const context = { artboard, config }; diff --git a/js/svg/rainPass.js b/js/svg/rainPass.js index 1583b5f..51387da 100644 --- a/js/svg/rainPass.js +++ b/js/svg/rainPass.js @@ -194,7 +194,12 @@ export default ({ artboard, config }) => { glyphElements.sort((p, q) => q[0] - p[0]) - output.innerHTML = `${defs.outerHTML}${glyphElements.map(([depth, tag]) => tag).join("\n")}`; + output.innerHTML = [ + ``, + defs.outerHTML, + ``, + glyphElements.map(([depth, tag]) => tag).join("\n") + ].join("\n"); artboard.appendChild(output); }; diff --git a/js/svg/utils.js b/js/svg/utils.js index 836b408..c811190 100644 --- a/js/svg/utils.js +++ b/js/svg/utils.js @@ -1,4 +1,9 @@ -const makePassSVG = () => document.createElementNS("http://www.w3.org/2000/svg", "svg"); +const svgNS = "http://www.w3.org/2000/svg"; +const makePassSVG = () => { + const svg = document.createElementNS(svgNS, "svg"); + svg.setAttribute("xmlns", svgNS); + return svg; +} const loadImage = (url) => { const image = new Image();