eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 22:29:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

The SVG is now given a black rectangle as a background, and its top level element now has the proper xmlns attribute. Double-clicking the SVG renderer downloads the SVG as a file called "matrix.svg".

Browse Source
This commit is contained in:
Rezmason
2025-05-13 18:20:51 -07:00
parent 4bf94d7883
commit 3fef805c1f
3 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
js/svg/main.js
View File

@@ -34,19 +34,14 @@ export default async (artboard, config) => {
const rect = artboard.getBoundingClientRect(); const rect = artboard.getBoundingClientRect();
[dimensions.width, dimensions.height] = [rect.width, rect.height]; [dimensions.width, dimensions.height] = [rect.width, rect.height];
if (document.fullscreenEnabled || document.webkitFullscreenEnabled) { window.ondblclick = () => {
window.ondblclick = () => { const blob = new Blob([artboard.querySelector("svg").outerHTML], { type: "image/svg+xml" });
if (document.fullscreenElement == null) { const url = URL.createObjectURL(blob);
if (artboard.webkitRequestFullscreen != null) { const aTag = document.createElement("a");
artboard.webkitRequestFullscreen(); aTag.download = 'matrix.svg';
} else { aTag.href = window.URL.createObjectURL(blob);
artboard.requestFullscreen(); aTag.click();
} };
} else {
document.exitFullscreen();
}
};
}
const effectName = config.effect in effects ? config.effect : "palette"; const effectName = config.effect in effects ? config.effect : "palette";
const context = { artboard, config }; const context = { artboard, config };

7
js/svg/rainPass.js
View File

@@ -194,7 +194,12 @@ export default ({ artboard, config }) => {
glyphElements.sort((p, q) => q[0] - p[0]) glyphElements.sort((p, q) => q[0] - p[0])
output.innerHTML = `<style>path { mix-blend-mode: screen; }</style>${defs.outerHTML}${glyphElements.map(([depth, tag]) => tag).join("\n")}`; output.innerHTML = [
`<style>path { mix-blend-mode: screen; }</style>`,
defs.outerHTML,
`<rect width="100%" height="100%" />`,
glyphElements.map(([depth, tag]) => tag).join("\n")
].join("\n");
artboard.appendChild(output); artboard.appendChild(output);
}; };

7
js/svg/utils.js
View File

@@ -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 loadImage = (url) => {
const image = new Image(); const image = new Image();