@liquid-js/qr-code-styling 5.6.1 → 5.7.0-0

package/lib/qr-code-styling-node.js

@@ -135,10 +135,12 @@ let ErrorCorrectionPercents = {
 let rx = /\.?0+$/;
 
 function numToAttr(value) {
-    return "string" == typeof value ? value : value.toFixed(7).replace(rx, "");
+    if ("string" == typeof value) return value;
+    let str = value.toFixed(7).replace(rx, "");
+    return "-0" == str ? "0" : str;
 }
 
-function svgPath(strings, ...values) {
+function svgAttr(strings, ...values) {
     return strings.reduce((t, v, i) => {
         let p = "";
         return i && (p = values[i - 1]), "number" == typeof p && (p = numToAttr(p)), `${t}${p}${v}`;
@@ -147,10 +149,125 @@ function svgPath(strings, ...values) {
 
 function rotateFigure({draw, ...args}) {
     let {x, y, size, rotation = 0} = args, cx = x + size / 2, cy = y + size / 2, element = draw(args);
-    return rotation && (Array.isArray(element) ? element : [ element ]).forEach(el => el.setAttribute("transform", `rotate(${numToAttr(180 * rotation / Math.PI)},${cx},${cy})`)), 
+    return rotation && (Array.isArray(element) ? element : [ element ]).forEach(el => el.setAttribute("transform", svgAttr`rotate(${180 * rotation / Math.PI},${cx},${cy})`)), 
     element;
 }
 
+let paramCount = {
+    m: 2,
+    l: 2,
+    h: 1,
+    v: 1,
+    c: 6,
+    s: 4,
+    q: 4,
+    t: 2,
+    a: 7,
+    z: 0
+};
+
+function rotatePath(d, angle = 0, cx = 0, cy = 0) {
+    let segments = function(d) {
+        let segments = [], skipRx = /[\s,]*/y, cmdRx = /[MmLlHhVvCcSsQqTtAaZz]/y, numRx = /[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/y, flagRx = /[01]/y, pos = 0, match = re => {
+            skipRx.lastIndex = pos, skipRx.exec(d), pos = re.lastIndex = skipRx.lastIndex;
+            const m = re.exec(d);
+            return m && (pos = re.lastIndex), m?.[0];
+        }, cmd = "";
+        for (;;) {
+            let c = match(cmdRx);
+            if (c) cmd = c; else {
+                if (pos >= d.length) break;
+                if (!cmd || "z" == cmd || "Z" == cmd) return;
+                "M" == cmd && (cmd = "L"), "m" == cmd && (cmd = "l");
+            }
+            let isArc = "a" == cmd || "A" == cmd, args = [];
+            for (let i = 0; i < paramCount[cmd.toLowerCase()]; i++) {
+                let v = match(!isArc || 3 != i && 4 != i ? numRx : flagRx);
+                if (void 0 === v) return;
+                args.push(parseFloat(v));
+            }
+            segments.push([ cmd, args ]);
+        }
+        return segments;
+    }(d);
+    if (!segments) return;
+    let rad = angle * Math.PI / 180, cos = Math.cos(rad), sin = Math.sin(rad), vector = (dx, dy) => svgAttr`${dx * cos - dy * sin} ${dx * sin + dy * cos}`, point = (px, py) => svgAttr`${cx + (px - cx) * cos - (py - cy) * sin} ${cy + (px - cx) * sin + (py - cy) * cos}`, x = 0, y = 0, startX = 0, startY = 0;
+    return segments.map(([cmd, args], i) => {
+        0 == i && "m" == cmd && (cmd = "M");
+        let rel = cmd != cmd.toUpperCase(), map = rel ? vector : point, ox = rel ? x : 0, oy = rel ? y : 0;
+        switch (cmd.toUpperCase()) {
+          case "Z":
+            return x = startX, y = startY, cmd;
+
+          case "H":
+          case "V":
+            {
+                let isH = "H" == cmd.toUpperCase(), dx = isH ? args[0] - (rel ? 0 : x) : 0, dy = isH ? 0 : args[0] - (rel ? 0 : y);
+                return x += dx, y += dy, angle ? svgAttr`l ${vector(dx, dy)}` : svgAttr`${cmd} ${args[0]}`;
+            }
+
+          case "A":
+            return x = ox + args[5], y = oy + args[6], svgAttr`${cmd} ${args[0]} ${args[1]} ${args[2] + angle} ${args[3]} ${args[4]} ${map(args[5], args[6])}`;
+
+          default:
+            {
+                let points = [];
+                for (let j = 0; j < args.length; j += 2) points.push(map(args[j], args[j + 1]));
+                return x = ox + args[args.length - 2], y = oy + args[args.length - 1], "M" != cmd && "m" != cmd || (startX = x, 
+                startY = y), svgAttr`${cmd} ${points.join(" ")}`;
+            }
+        }
+    }).join(" ");
+}
+
+function shapeToPath(el) {
+    let num = name => parseFloat(el.getAttribute(name) || "0") || 0;
+    switch (el.tagName) {
+      case "path":
+        return el.getAttribute("d") || "";
+
+      case "rect":
+        {
+            let x = num("x"), y = num("y"), w = num("width"), h = num("height"), rX = el.hasAttribute("rx") ? num("rx") : num("ry"), rY = el.hasAttribute("ry") ? num("ry") : rX;
+            return rX = Math.min(Math.max(rX, 0), w / 2), rY = Math.min(Math.max(rY, 0), h / 2), 
+            w <= 0 || h <= 0 ? "" : rX && rY ? svgAttr`M ${x} ${y + rY} v ${h - 2 * rY} a ${rX} ${rY} 0 0 0 ${rX} ${rY} h ${w - 2 * rX} a ${rX} ${rY} 0 0 0 ${rX} ${-rY} v ${2 * rY - h} a ${rX} ${rY} 0 0 0 ${-rX} ${-rY} h ${2 * rX - w} a ${rX} ${rY} 0 0 0 ${-rX} ${rY} z` : svgAttr`M ${x} ${y} v ${h} h ${w} v ${-h} z`;
+        }
+
+      case "circle":
+      case "ellipse":
+        {
+            let cx = num("cx"), cy = num("cy"), rX = "circle" == el.tagName ? num("r") : num("rx"), rY = "circle" == el.tagName ? rX : num("ry");
+            return rX <= 0 || rY <= 0 ? "" : svgAttr`M ${cx - rX} ${cy} a ${rX} ${rY} 0 1 0 ${2 * rX} 0 a ${rX} ${rY} 0 1 0 ${-2 * rX} 0 z`;
+        }
+
+      case "polygon":
+        return `M ${el.getAttribute("points") || ""} z`;
+
+      default:
+        return;
+    }
+}
+
+function mergeShapes(elements) {
+    let rotateRx = /^\s*rotate\(\s*([-+.\deE]+)(?:[\s,]+([-+.\deE]+)[\s,]+([-+.\deE]+))?\s*\)\s*$/, paths = {};
+    for (let el of elements) {
+        if (el.hasAttribute("clip-path")) return;
+        let d = shapeToPath(el);
+        if (void 0 === d) return;
+        if (!d) continue;
+        let transform = el.getAttribute("transform"), m = transform ? rotateRx.exec(transform) : void 0;
+        if (null === m) return;
+        let rotated = m ? rotatePath(d, parseFloat(m[1]), parseFloat(m[2] || "0"), parseFloat(m[3] || "0")) : rotatePath(d);
+        if (void 0 === rotated) return;
+        let rule = "evenodd" == el.getAttribute("clip-rule") ? "evenodd" : "nonzero";
+        paths[rule] || (paths[rule] = []), paths[rule].push(rotated);
+    }
+    return Object.entries(paths).map(([rule, d]) => ({
+        rule,
+        d: d.join(" ")
+    }));
+}
+
 let DotElements = {
     dot: args => {
         const {size, x, y, document} = args, element = document.createElementNS("http://www.w3.org/2000/svg", "circle");
@@ -165,27 +282,27 @@ let DotElements = {
     },
     sideRounded: (args, {height = args.size} = {}) => {
         const {size, x, y, document} = args, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x} ${y + (size - height) / 2} v ${height} h ${size / 2} a ${height / 2} ${height / 2} 0 0 0 0 ${-height} z`), 
+        return element.setAttribute("d", svgAttr`M ${x} ${y + (size - height) / 2} v ${height} h ${size / 2} a ${height / 2} ${height / 2} 0 0 0 0 ${-height} z`), 
         element;
     },
     cornerRounded: args => {
         const {size, x, y, document} = args, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size / 2} a ${size / 2} ${size / 2} 0 0 0 ${-size / 2} ${-size / 2} z`), 
+        return element.setAttribute("d", svgAttr`M ${x} ${y} v ${size} h ${size} v ${-size / 2} a ${size / 2} ${size / 2} 0 0 0 ${-size / 2} ${-size / 2} z`), 
         element;
     },
     cornerExtraRounded: args => {
         const {size, x, y, document} = args, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} a ${size} ${size} 0 0 0 ${-size} ${-size} z`), 
+        return element.setAttribute("d", svgAttr`M ${x} ${y} v ${size} h ${size} a ${size} ${size} 0 0 0 ${-size} ${-size} z`), 
         element;
     },
     classyDot: args => {
         const {size, x, y, document} = args, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x} ${y} v ${size / 2} a ${size / 2} ${size / 2} 0 0 0 ${size / 2} ${size / 2} h ${size / 2} v ${-size / 2} a ${size / 2} ${size / 2} 0 0 0 ${-size / 2} ${-size / 2} z`), 
+        return element.setAttribute("d", svgAttr`M ${x} ${y} v ${size / 2} a ${size / 2} ${size / 2} 0 0 0 ${size / 2} ${size / 2} h ${size / 2} v ${-size / 2} a ${size / 2} ${size / 2} 0 0 0 ${-size / 2} ${-size / 2} z`), 
         element;
     },
     wave: args => {
         const {size, x, y, document} = args, a1 = 5 * Math.PI / 180, a2 = 65 * Math.PI / 180, c23x = size * (1 - .65 * Math.sin(a1)), c23y = -size * (.95 - .65 * Math.cos(a1)), c31x = -size * Math.sin(a2) / 2, c31y = size * Math.cos(a2) / 2, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x} ${y + size} c ${.65 * size} 0 ${c23x} ${c23y} ${size} ${.95 * -size} c ${c31x} ${c31y} ${-size / 2} ${size * (.95 - 1)} ${-size} ${size * (.95 - 1)} z`), 
+        return element.setAttribute("d", svgAttr`M ${x} ${y + size} c ${.65 * size} 0 ${c23x} ${c23y} ${size} ${.95 * -size} c ${c31x} ${c31y} ${-size / 2} ${size * (.95 - 1)} ${-size} ${size * (.95 - 1)} z`), 
         element;
     },
     heart: args => {
@@ -209,44 +326,44 @@ let DotElements = {
     },
     classy: args => {
         const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} H ${x} z`), 
+        return element.setAttribute("d", svgAttr`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} H ${x} z`), 
         element;
     },
     inpoint: args => {
         const {size, x, y, document} = args, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x} ${y + size / 2} v ${size / 4} a ${size / 4} ${size / 4} 0 0 0 ${size / 4} ${size / 4} h ${size / 4 * 3} v ${-size / 4 * 3} a ${size / 4} ${size / 4} 0 0 0 ${-size / 4} ${-size / 4} h ${-size / 2} a ${size / 4} ${size / 4} 0 0 0 ${-size / 4} ${size / 4} z`), 
+        return element.setAttribute("d", svgAttr`M ${x} ${y + size / 2} v ${size / 4} a ${size / 4} ${size / 4} 0 0 0 ${size / 4} ${size / 4} h ${size / 4 * 3} v ${-size / 4 * 3} a ${size / 4} ${size / 4} 0 0 0 ${-size / 4} ${-size / 4} h ${-size / 2} a ${size / 4} ${size / 4} 0 0 0 ${-size / 4} ${size / 4} z`), 
         element;
     },
     star: (args, {spikes = 5, outerRadius = args.size / 2, innerRadius = args.size / 4} = {}) => {
         const {size, x, y, document} = args, cx = x + size / 2, cy = y + size / 2, angle = Math.PI / spikes, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
         return element.setAttribute("d", Array(2 * spikes).fill(0).map((_, i) => {
             const radius = i % 2 == 0 ? outerRadius : innerRadius;
-            return svgPath`${0 === i ? "M" : "L"} ${cx + radius * Math.sin(i * angle)} ${cy - radius * Math.cos(i * angle)}`;
+            return svgAttr`${0 === i ? "M" : "L"} ${cx + radius * Math.sin(i * angle)} ${cy - radius * Math.cos(i * angle)}`;
         }).join(" ")), element;
     },
     weave: args => {
         const {size, x, y, document} = args, thickness = .6 * size, notch = (size - thickness) / 2, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x + notch} ${y} l ${thickness} 0 l 0 ${notch} l ${notch} 0 l 0 ${thickness} l ${-notch} 0 l 0 ${notch} l ${-thickness} 0 l 0 ${-notch} l ${-notch} 0 l 0 ${-thickness} l ${notch} 0 z`), 
+        return element.setAttribute("d", svgAttr`M ${x + notch} ${y} l ${thickness} 0 l 0 ${notch} l ${notch} 0 l 0 ${thickness} l ${-notch} 0 l 0 ${notch} l ${-thickness} 0 l 0 ${-notch} l ${-notch} 0 l 0 ${-thickness} l ${notch} 0 z`), 
         element;
     },
     blob: (args, corners) => {
-        const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path"), parts = [ svgPath`M ${x} ${y + 2.5 * dotSize}` ];
+        const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path"), parts = [ svgAttr`M ${x} ${y + 2.5 * dotSize}` ];
         let l = 2 * dotSize;
-        return "round" == corners.bl ? (parts.push(svgPath`v ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize}`), 
-        l = 2 * dotSize) : "out" == corners.bl ? (parts.push(svgPath`v ${5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${2.5 * dotSize} ${-2.5 * dotSize}`), 
-        l = 2 * dotSize) : (parts.push(svgPath`v ${2.5 * dotSize + l}`), l = 4.5 * dotSize), 
-        "round" == corners.br ? (parts.push(svgPath`h ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${-2.5 * dotSize}`), 
-        l = -2 * dotSize) : "out" == corners.br ? (parts.push(svgPath`h ${5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${-2.5 * dotSize} ${-2.5 * dotSize}`), 
-        l = -2 * dotSize) : (parts.push(svgPath`h ${2.5 * dotSize + l}`), l = -4.5 * dotSize), 
-        "round" == corners.tr ? (parts.push(svgPath`v ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${-2.5 * dotSize} ${-2.5 * dotSize}`), 
-        l = -2 * dotSize) : "out" == corners.tr ? (parts.push(svgPath`v ${-5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${-2.5 * dotSize} ${2.5 * dotSize}`), 
-        l = -2 * dotSize) : (parts.push(svgPath`v ${-2.5 * dotSize + l}`), l = -4.5 * dotSize), 
-        "round" == corners.tl ? parts.push(svgPath`h ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${-2.5 * dotSize} ${2.5 * dotSize}`) : "out" == corners.tl ? parts.push(svgPath`h ${-5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${2.5 * dotSize} ${2.5 * dotSize}`) : parts.push(svgPath`h ${-2.5 * dotSize + l}`), 
+        return "round" == corners.bl ? (parts.push(svgAttr`v ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize}`), 
+        l = 2 * dotSize) : "out" == corners.bl ? (parts.push(svgAttr`v ${5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${2.5 * dotSize} ${-2.5 * dotSize}`), 
+        l = 2 * dotSize) : (parts.push(svgAttr`v ${2.5 * dotSize + l}`), l = 4.5 * dotSize), 
+        "round" == corners.br ? (parts.push(svgAttr`h ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${-2.5 * dotSize}`), 
+        l = -2 * dotSize) : "out" == corners.br ? (parts.push(svgAttr`h ${5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${-2.5 * dotSize} ${-2.5 * dotSize}`), 
+        l = -2 * dotSize) : (parts.push(svgAttr`h ${2.5 * dotSize + l}`), l = -4.5 * dotSize), 
+        "round" == corners.tr ? (parts.push(svgAttr`v ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${-2.5 * dotSize} ${-2.5 * dotSize}`), 
+        l = -2 * dotSize) : "out" == corners.tr ? (parts.push(svgAttr`v ${-5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${-2.5 * dotSize} ${2.5 * dotSize}`), 
+        l = -2 * dotSize) : (parts.push(svgAttr`v ${-2.5 * dotSize + l}`), l = -4.5 * dotSize), 
+        "round" == corners.tl ? parts.push(svgAttr`h ${l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${-2.5 * dotSize} ${2.5 * dotSize}`) : "out" == corners.tl ? parts.push(svgAttr`h ${-5 * dotSize + l} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 1 ${2.5 * dotSize} ${2.5 * dotSize}`) : parts.push(svgAttr`h ${-2.5 * dotSize + l}`), 
         element.setAttribute("d", parts.join(" ") + " z"), element;
     },
     circuit: (args, left = !1) => {
         const {size, x, y, document} = args, dP = .17 ** .5 * size, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return element.setAttribute("d", svgPath`M ${x + .4 * size} ${y + .5 * size - dP} a ${.4 * size} ${.4 * size} 0 0 0 ${left ? .1 * size - dP : -.3 * size} ${left ? dP - .1 * size : dP} ${left ? svgPath`h ${-.65 * size} v ${.2 * size} h ${.65 * size} a ${.4 * size} ${.4 * size} 0 0 0 ${dP} ${.3 * size}` : svgPath`a ${.4 * size} ${.4 * size} 0 0 0 ${.4 * size} ${.4 * size}`} a ${.4 * size} ${.4 * size} 0 0 0 ${.4 * size} ${-.4 * size} a ${.4 * size} ${.4 * size} 0 0 0 ${-.3 * size} ${-dP} v ${-.65 * size} h ${-.2 * size} z`), 
+        return element.setAttribute("d", svgAttr`M ${x + .4 * size} ${y + .5 * size - dP} a ${.4 * size} ${.4 * size} 0 0 0 ${left ? .1 * size - dP : -.3 * size} ${left ? dP - .1 * size : dP} ${left ? svgAttr`h ${-.65 * size} v ${.2 * size} h ${.65 * size} a ${.4 * size} ${.4 * size} 0 0 0 ${dP} ${.3 * size}` : svgAttr`a ${.4 * size} ${.4 * size} 0 0 0 ${.4 * size} ${.4 * size}`} a ${.4 * size} ${.4 * size} 0 0 0 ${.4 * size} ${-.4 * size} a ${.4 * size} ${.4 * size} 0 0 0 ${-.3 * size} ${-dP} v ${-.65 * size} h ${-.2 * size} z`), 
         element.setAttribute("fill-rule", "nonzero"), element;
     }
 }, qrCornerDotFigures = {
@@ -305,44 +422,44 @@ let DotElements = {
 let SquareElements = {
     dot: args => {
         const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x + size / 2} ${y} a ${size / 2} ${size / 2} 0 1 0 0.1 0 z m 0 ${dotSize} a ${size / 2 - dotSize} ${size / 2 - dotSize} 0 1 1 -0.1 0 Z`);
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgAttr`M ${x + size / 2} ${y} a ${size / 2} ${size / 2} 0 1 0 0.1 0 z m 0 ${dotSize} a ${size / 2 - dotSize} ${size / 2 - dotSize} 0 1 1 -0.1 0 Z`);
         const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + size / 2} ${y - dotSize} a ${size / 2 + dotSize} ${size / 2 + dotSize} 0 1 0 0.1 0 z`), 
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgAttr`M ${x + size / 2} ${y - dotSize} a ${size / 2 + dotSize} ${size / 2 + dotSize} 0 1 0 0.1 0 z`), 
         [ element, fill ];
     },
     square: args => {
         const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y} v ${size} h ${size} v ${-size} z M ${x + dotSize} ${y + dotSize} h ${size - 2 * dotSize} v ${size - 2 * dotSize} h ${2 * dotSize - size} z`);
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgAttr`M ${x} ${y} v ${size} h ${size} v ${-size} z M ${x + dotSize} ${y + dotSize} h ${size - 2 * dotSize} v ${size - 2 * dotSize} h ${2 * dotSize - size} z`);
         const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - dotSize} ${y - dotSize} h ${size + 2 * dotSize} v ${size + 2 * dotSize} h ${-size - 2 * dotSize} z`), 
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgAttr`M ${x - dotSize} ${y - dotSize} h ${size + 2 * dotSize} v ${size + 2 * dotSize} h ${-size - 2 * dotSize} z`), 
         [ element, fill ];
     },
     extraRounded: args => {
         const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize} h ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * -dotSize} v ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * dotSize} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * dotSize} v ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * -dotSize} ${1.5 * dotSize} h ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * -dotSize} z`);
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgAttr`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize} h ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * -dotSize} v ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * dotSize} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * dotSize} v ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * -dotSize} ${1.5 * dotSize} h ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * -dotSize} z`);
         const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - dotSize} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 0 ${3.5 * dotSize} ${3.5 * dotSize} h ${2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 0 ${3.5 * dotSize} ${3.5 * -dotSize} v ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 0 ${3.5 * -dotSize} ${3.5 * -dotSize} h ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 0 ${3.5 * -dotSize} ${3.5 * dotSize} z`), 
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgAttr`M ${x - dotSize} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 0 ${3.5 * dotSize} ${3.5 * dotSize} h ${2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 0 ${3.5 * dotSize} ${3.5 * -dotSize} v ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 0 ${3.5 * -dotSize} ${3.5 * -dotSize} h ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 0 ${3.5 * -dotSize} ${3.5 * dotSize} z`), 
         [ element, fill ];
     },
     classy: args => {
         const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} H ${x} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * dotSize} v ${3.5 * dotSize} h ${-3.5 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-3.5 * dotSize} z`);
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgAttr`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} H ${x} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * dotSize} v ${3.5 * dotSize} h ${-3.5 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-3.5 * dotSize} z`);
         const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + .5 * dotSize} ${y - dotSize} h ${4 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * dotSize} ${3.5 * dotSize} v ${5.5 * dotSize} h ${-5.5 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * -dotSize} ${3.5 * -dotSize} v ${-5.5 * dotSize} z`), 
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgAttr`M ${x + .5 * dotSize} ${y - dotSize} h ${4 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * dotSize} ${3.5 * dotSize} v ${5.5 * dotSize} h ${-5.5 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * -dotSize} ${3.5 * -dotSize} v ${-5.5 * dotSize} z`), 
         [ element, fill ];
     },
     inpoint: args => {
         const {size, x, y, document} = args, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * dotSize} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * dotSize} v ${3.5 * dotSize} h ${-3.5 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * -dotSize} z`);
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgAttr`M ${x} ${y + 2.5 * dotSize} v ${2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * dotSize} ${2.5 * dotSize} h ${4.5 * dotSize} v ${-4.5 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * -dotSize} h ${-2 * dotSize} a ${2.5 * dotSize} ${2.5 * dotSize} 0 0 0 ${2.5 * -dotSize} ${2.5 * dotSize} z M ${x + 2.5 * dotSize} ${y + dotSize} h ${2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * dotSize} v ${3.5 * dotSize} h ${-3.5 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * -dotSize} ${1.5 * -dotSize} v ${-2 * dotSize} a ${1.5 * dotSize} ${1.5 * dotSize} 0 0 1 ${1.5 * dotSize} ${1.5 * -dotSize} z`);
         const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x + .5 * dotSize} ${y - dotSize} h ${4 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * dotSize} ${3.5 * dotSize} v ${5.5 * dotSize} h ${-5.5 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * -dotSize} ${3.5 * -dotSize} v ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * dotSize} ${3.5 * -dotSize} z`), 
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgAttr`M ${x + .5 * dotSize} ${y - dotSize} h ${4 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * dotSize} ${3.5 * dotSize} v ${5.5 * dotSize} h ${-5.5 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * -dotSize} ${3.5 * -dotSize} v ${-2 * dotSize} a ${3.5 * dotSize} ${3.5 * dotSize} 0 0 1 ${3.5 * dotSize} ${3.5 * -dotSize} z`), 
         [ element, fill ];
     },
     centerCircle: args => {
         const {x, y, size, document} = args, circleRadius = size / 2.5, cx = x + size / 2, cy = y + size / 2, dotSize = size / 7, element = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgPath`M ${x} ${y} h ${size} v ${size} h ${-size} z M ${cx - circleRadius} ${cy} a ${circleRadius} ${circleRadius} 0 1 0 ${2 * circleRadius} 0 a ${circleRadius} ${circleRadius} 0 1 0 ${2 * -circleRadius} 0 z`);
+        element.setAttribute("clip-rule", "evenodd"), element.setAttribute("d", svgAttr`M ${x} ${y} h ${size} v ${size} h ${-size} z M ${cx - circleRadius} ${cy} a ${circleRadius} ${circleRadius} 0 1 0 ${2 * circleRadius} 0 a ${circleRadius} ${circleRadius} 0 1 0 ${2 * -circleRadius} 0 z`);
         const fill = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgPath`M ${x - dotSize} ${y - dotSize} h ${size + 2 * dotSize} v ${size + 2 * dotSize} h ${-size - 2 * dotSize} z`), 
+        return fill.setAttribute("clip-rule", "evenodd"), fill.setAttribute("d", svgAttr`M ${x - dotSize} ${y - dotSize} h ${size + 2 * dotSize} v ${size + 2 * dotSize} h ${-size - 2 * dotSize} z`), 
         [ element, fill ];
     }
 }, qrCornerSquareFigures = {
@@ -774,6 +891,8 @@ class QRSVG {
     backgroundMask;
     dotsMask;
     lightDotsMask;
+    colorLayers=[];
+    segmentMask;
     qr;
     document;
     imageTools;
@@ -797,7 +916,7 @@ class QRSVG {
             width: 0,
             height: 0
         };
-        if (this.qr = qr, this.options.image) {
+        if (this.qr = qr, this.segmentMask = this.getSegmentMask(count), this.options.image) {
             let size = await this.imageTools.getSize(this.options.image, this.options.imageOptions.crossOrigin), {imageOptions, errorCorrectionPercent} = this.options;
             if (imageOptions.mode == ImageMode.background) {
                 let margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0, maxSize = (this.options.size - 2 * margin * dotSize) * imageOptions.imageSize, {width, height} = size;
@@ -867,7 +986,33 @@ class QRSVG {
             height: drawImageSize.height,
             count,
             dotSize
-        }), this.drawCorners();
+        }), this.drawCorners(), this.flattenColorLayers();
+    }
+    flattenColorLayers() {
+        let masks = new Map;
+        Array.from(this.defs.childNodes).forEach(node => {
+            let id = node.getAttribute?.("id");
+            id && masks.set(id, node);
+        });
+        for (let {rect, mask: id} of this.colorLayers) {
+            let mask = masks.get(id);
+            if (!mask) continue;
+            let paths = mergeShapes(Array.from(mask.childNodes).filter(node => 1 == node.nodeType));
+            if (!paths) continue;
+            let elements = paths.map(({rule, d}) => {
+                const path = this.document.createElementNS("http://www.w3.org/2000/svg", "path");
+                path.setAttribute("d", d), "nonzero" != rule && path.setAttribute("fill-rule", rule);
+                const fill = rect.getAttribute("fill");
+                fill && path.setAttribute("fill", fill);
+                const opacity = rect.getAttribute("opacity");
+                return opacity && path.setAttribute("fill-opacity", opacity), path;
+            }), layer = elements[0];
+            if (elements.length > 1) {
+                let group = this.document.createElementNS("http://www.w3.org/2000/svg", "g");
+                elements.forEach(el => group.appendChild(el)), layer = group;
+            }
+            mask.parentNode.removeChild(mask), layer ? (layer.setAttribute("id", id), rect.parentNode.replaceChild(layer, rect)) : rect.parentNode.removeChild(rect);
+        }
     }
     drawBackground() {
         let options = this.options;
@@ -895,46 +1040,44 @@ class QRSVG {
         if (!this.qr) throw new Error("QR code is not defined");
         let options = this.options, count = this.qr.getModuleCount();
         if (count > options.size) throw new Error("The canvas is too small");
-        let dotSize = this.options.dotsOptions.size, size = options.size;
-        options.imageOptions.mode == ImageMode.background && (size -= 2 * dotSize * (options.imageOptions.margin || 0));
-        let beginning = Math.floor((options.size - count * dotSize) / 2), draw = getQrDotFigure(options.dotsOptions.type, options.plugins), orgDarw = draw;
+        let dotSize = this.options.dotsOptions.size, beginning = Math.floor((options.size - count * dotSize) / 2), draw = getQrDotFigure(options.dotsOptions.type, options.plugins), orgDarw = draw;
         this.dotsMask = this.createMask("mask-dot-color"), this.defs.appendChild(this.dotsMask), 
         options.imageOptions.mode == ImageMode.background && (this.lightDotsMask = this.createMask("mask-light-dot-color"), 
         this.defs.appendChild(this.lightDotsMask));
-        let margin = 0, additionalDots = 0, fakeCount = count;
-        options.shape === ShapeType.circle ? (margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0, 
-        additionalDots = Math.floor((size / dotSize - count - 2 * margin) / 2), fakeCount = count + 2 * additionalDots) : options.imageOptions.mode == ImageMode.background && (additionalDots = 1, 
-        fakeCount = count + 2 * additionalDots);
-        let fakeBeginning = beginning - additionalDots * dotSize, colorCount = count + 2 * additionalDots;
-        this._fakeMatrix = new Array(fakeCount);
-        let center = Math.floor(fakeCount / 2), rng = getRng(this._fakeMatrix, 0, 0, !1);
-        for (let i = 0; i < fakeCount; i++) {
-            this._fakeMatrix[i] = new Array(fakeCount);
-            for (let j = 0; j < fakeCount; j++) {
-                if (i > additionalDots - 1 && i < fakeCount - additionalDots && j > additionalDots - 1 && j < fakeCount - additionalDots) {
-                    let ii = i - additionalDots, jj = j - additionalDots;
+        let mask = this.segmentMask || this.getSegmentMask(count), offsetX = mask.startX, offsetY = mask.startY, fakeCountX = mask.mask.length, fakeCountY = Math.max(0, ...mask.mask.map(col => col.length)), fakeBeginningX = beginning - offsetX * dotSize, fakeBeginningY = beginning - offsetY * dotSize, colorSize = Math.max(fakeCountX, fakeCountY) * dotSize, colorX = fakeBeginningX + (fakeCountX * dotSize - colorSize) / 2, colorY = fakeBeginningY + (fakeCountY * dotSize - colorSize) / 2;
+        if (!mask.fitGradient) {
+            let half = count / 2 + Math.max(offsetX, offsetY, fakeCountX - offsetX - count, fakeCountY - offsetY - count);
+            colorX = colorY = beginning + (count / 2 - half) * dotSize, colorSize = 2 * half * dotSize;
+        }
+        this._fakeMatrix = new Array(fakeCountX);
+        let rng = getRng(this._fakeMatrix, 0, 0, !1);
+        for (let i = 0; i < fakeCountX; i++) {
+            this._fakeMatrix[i] = new Array(fakeCountY);
+            for (let j = 0; j < fakeCountY; j++) if (mask.mask[i][j]) {
+                if (i > offsetX - 1 && i < offsetX + count && j > offsetY - 1 && j < offsetY + count) {
+                    let ii = i - offsetX, jj = j - offsetY;
                     filter && !filter(ii, jj) ? this._fakeMatrix[i][j] = void 0 : this._fakeMatrix[i][j] = !!this.qr.isDark(jj, ii);
                     continue;
                 }
-                options.shape === ShapeType.circle && Math.sqrt((i - center) * (i - center) + (j - center) * (j - center)) > center ? this._fakeMatrix[i][j] = void 0 : this._fakeMatrix[i][j] = i != additionalDots - 1 && i != fakeCount - additionalDots && j != additionalDots - 1 && j != fakeCount - additionalDots ? this.qr.isDark(Math.floor(rng() * count), Math.floor(rng() * count)) : (j == additionalDots - 1 && (i < additionalDots + 8 || i > fakeCount - additionalDots - 9) || j == fakeCount - additionalDots && i < additionalDots + 8 || i == additionalDots - 1 && (j < additionalDots + 8 || j > fakeCount - additionalDots - 9) || i == fakeCount - additionalDots && j < additionalDots + 8) && void 0;
-            }
+                this._fakeMatrix[i][j] = !(i >= offsetX - 1 && i <= offsetX + count && j >= offsetY - 1 && j <= offsetY + count) && this.qr.isDark(Math.floor(rng() * count), Math.floor(rng() * count));
+            } else this._fakeMatrix[i][j] = void 0;
         }
-        let typeNr = (count - 17) / 4, alignment = QRUtil.getPatternPosition(typeNr), alignmentMatrix = new Array(fakeCount);
-        for (let i = 0; i < fakeCount; i++) {
-            alignmentMatrix[i] = new Array(fakeCount);
-            let iAlign = alignment.find(v => i - additionalDots > v - 3 && i - additionalDots < v + 3);
-            for (let j = 0; j < fakeCount; j++) {
-                let jAlign = alignment.find(v => j - additionalDots > v - 3 && j - additionalDots < v + 3);
+        let typeNr = (count - 17) / 4, alignment = QRUtil.getPatternPosition(typeNr), alignmentMatrix = new Array(fakeCountX);
+        for (let i = 0; i < fakeCountX; i++) {
+            alignmentMatrix[i] = new Array(fakeCountY);
+            let iAlign = alignment.find(v => i - offsetX > v - 3 && i - offsetX < v + 3);
+            for (let j = 0; j < fakeCountY; j++) {
+                let jAlign = alignment.find(v => j - offsetY > v - 3 && j - offsetY < v + 3);
                 alignmentMatrix[i][j] = void 0, null != this._fakeMatrix[i][j] && (this.lightDotsMask && iAlign && jAlign && (iAlign != alignment[0] && jAlign != alignment[0] || jAlign != alignment[0] && jAlign != alignment[alignment.length - 1] || iAlign != alignment[0] && iAlign != alignment[alignment.length - 1]) && (alignmentMatrix[i][j] = this._fakeMatrix[i][j]));
             }
         }
-        for (let i = 0; i < fakeCount; i++) for (let j = 0; j < fakeCount; j++) {
+        for (let i = 0; i < fakeCountX; i++) for (let j = 0; j < fakeCountY; j++) {
             if (null == this._fakeMatrix[i][j]) continue;
             this.lightDotsMask && (draw = null != alignmentMatrix[i][j] ? orgDarw : getQrDotFigure(DotType.tinySquare));
             let alignmentNb = options.imageOptions.mode == ImageMode.background && null != alignmentMatrix[i][j];
             this._fakeMatrix[i][j] ? this.dotsMask && this.dotsMask.appendChild(draw({
-                x: fakeBeginning + i * dotSize,
-                y: fakeBeginning + j * dotSize,
+                x: fakeBeginningX + i * dotSize,
+                y: fakeBeginningY + j * dotSize,
                 size: dotSize,
                 document: this.options.document,
                 getNeighbor: (xOffset, yOffset) => {
@@ -943,8 +1086,8 @@ class QRSVG {
                 },
                 getPRandom: getRng(this._fakeMatrix, i, j)
             })) : this.lightDotsMask && this.lightDotsMask && this.lightDotsMask.appendChild(draw({
-                x: fakeBeginning + i * dotSize,
-                y: fakeBeginning + j * dotSize,
+                x: fakeBeginningX + i * dotSize,
+                y: fakeBeginningY + j * dotSize,
                 size: dotSize,
                 document: this.options.document,
                 getNeighbor: (xOffset, yOffset) => {
@@ -958,19 +1101,19 @@ class QRSVG {
             options: options.imageOptions.fill.gradient,
             color: options.imageOptions.fill.color,
             additionalRotation: 0,
-            x: fakeBeginning,
-            y: fakeBeginning,
-            height: colorCount * dotSize,
-            width: colorCount * dotSize,
+            x: colorX,
+            y: colorY,
+            height: colorSize,
+            width: colorSize,
             name: "light-dot-color"
         }), this._dotsColor = this.createColor({
             options: options.dotsOptions?.gradient,
             color: options.dotsOptions.color,
             additionalRotation: 0,
-            x: fakeBeginning,
-            y: fakeBeginning,
-            height: colorCount * dotSize,
-            width: colorCount * dotSize,
+            x: colorX,
+            y: colorY,
+            height: colorSize,
+            width: colorSize,
             name: "dot-color"
         });
     }
@@ -1086,22 +1229,51 @@ class QRSVG {
             }
         });
     }
+    getSegmentMask(count) {
+        let options = this.options;
+        if (options.mask) return options.mask;
+        let dotSize = options.dotsOptions.size, offset = 0;
+        if (options.shape === ShapeType.circle) {
+            let size = options.size;
+            options.imageOptions.mode == ImageMode.background && (size -= 2 * dotSize * (options.imageOptions.margin || 0));
+            let margin = options.backgroundOptions && options.backgroundOptions.margin || 0;
+            offset = Math.floor((size / dotSize - count - 2 * margin) / 2);
+        } else options.imageOptions.mode == ImageMode.background && (offset = 1);
+        let fakeCount = count + 2 * offset, center = Math.floor(fakeCount / 2);
+        return {
+            mask: Array.from({
+                length: fakeCount
+            }, (_col, i) => Array.from({
+                length: fakeCount
+            }, (_cell, j) => options.shape !== ShapeType.circle || i >= offset && i < offset + count && j >= offset && j < offset + count || Math.sqrt((i - center) * (i - center) + (j - center) * (j - center)) <= center)),
+            startX: offset,
+            startY: offset
+        };
+    }
     async drawImage({width, height, count, dotSize}) {
         let options = this.options, beginning = Math.floor((options.size - count * dotSize) / 2), margin = options.imageOptions.margin * dotSize;
         options.imageOptions.mode == ImageMode.background && (margin = 0);
-        let dx = beginning + margin + (count * dotSize - width) / 2, dy = beginning + margin + (count * dotSize - height) / 2, dw = width - 2 * margin, dh = height - 2 * margin, imageUrl = await this.imageTools.toDataURL(options.image || ""), image = this.document.createElementNS("http://www.w3.org/2000/svg", "image");
-        if (image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", imageUrl || ""), 
-        imageUrl.startsWith("data:image/svg+xml;")) {
-            let data = imageUrl.substring(19), i = data.indexOf(","), encoding = data.substring(0, i);
-            if (data = data.substring(i + 1), "base64" === encoding) data = "function" == typeof atob ? atob(data) : Buffer.from(data, "base64").toString("utf8"); else data = "";
-            if (data) {
-                let container = (new DOMParser).parseFromString(data, "text/xml"), rootEl = Array.from(container.getElementsByTagName("svg"));
-                rootEl.length && (image = rootEl[0], image.setAttribute("overflow", "visible"));
+        let dx = beginning + margin + (count * dotSize - width) / 2, dy = beginning + margin + (count * dotSize - height) / 2, dw = width - 2 * margin, dh = height - 2 * margin, imageUrl = await this.imageTools.toDataURL(options.image || "");
+        this._element.appendChild(function(document, imageUrl, {x, y, width, height}) {
+            let image = document.createElementNS("http://www.w3.org/2000/svg", "image");
+            if (image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", imageUrl || ""), 
+            imageUrl.startsWith("data:image/svg+xml;")) {
+                let data = imageUrl.substring(19), i = data.indexOf(","), encoding = data.substring(0, i);
+                if (data = data.substring(i + 1), data = "base64" === encoding ? "function" == typeof atob ? atob(data) : Buffer.from(data, "base64").toString("utf8") : "", 
+                data) {
+                    let container = (new DOMParser).parseFromString(data, "text/xml"), rootEl = Array.from(container.getElementsByTagName("svg"));
+                    rootEl.length && (image = rootEl[0], image.setAttribute("overflow", "visible"));
+                }
             }
-        }
-        image.setAttribute("x", numToAttr(dx)), image.setAttribute("y", numToAttr(dy)), 
-        image.setAttribute("width", `${numToAttr(dw)}px`), image.setAttribute("height", `${numToAttr(dh)}px`), 
-        this._element.appendChild(image);
+            return image.setAttribute("x", numToAttr(x)), image.setAttribute("y", numToAttr(y)), 
+            image.setAttribute("width", svgAttr`${width}px`), image.setAttribute("height", svgAttr`${height}px`), 
+            image;
+        }(this.document, imageUrl, {
+            x: dx,
+            y: dy,
+            width: dw,
+            height: dh
+        }));
     }
     createColor(cfg) {
         let {width, height, x, y} = cfg;
@@ -1132,7 +1304,7 @@ class QRSVG {
                 }
                 return options.colorStops.forEach(stopCfg => {
                     let stop = document.createElementNS("http://www.w3.org/2000/svg", "stop");
-                    stop.setAttribute("offset", `${numToAttr(100 * stopCfg.offset)}%`);
+                    stop.setAttribute("offset", svgAttr`${100 * stopCfg.offset}%`);
                     let parsed = parseColor(stopCfg.color);
                     stop.setAttribute("stop-color", parsed.value), parsed.alpha < 1 && stop.setAttribute("stop-opacity", parsed.alpha.toFixed(7)), 
                     gradient.appendChild(stop);
@@ -1156,7 +1328,10 @@ class QRSVG {
         });
         return value && (rect.setAttribute("fill", value.value), value.gradient && this.defs.appendChild(value.gradient), 
         value.opacity < 1 && rect.setAttribute("opacity", value.opacity.toFixed(7))), this._element.appendChild(rect), 
-        value;
+        this.colorLayers.push({
+            rect,
+            mask: `mask-${cfg.name}`
+        }), value;
     }
     createMask(id) {
         let mask = this.document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
@@ -1232,34 +1407,64 @@ let QRCodeStyling$1 = class {
     }
     setupSvg() {
         if (!this.qr) return;
-        let moduleCount = this.qr.getModuleCount();
-        this.options.imageOptions.mode == ImageMode.background && this.options.shape != ShapeType.circle && (moduleCount += 2);
-        let count = Math.ceil((this.options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * moduleCount);
-        count % 2 == 0 && (count -= 1);
-        let margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0;
-        this.options.imageOptions.mode == ImageMode.background && (margin += this.options.imageOptions.margin || 0);
-        let size = Math.ceil(this.options.dotsOptions.size * (count + 2 * margin));
+        let mask, size, appliedMask, moduleCount = this.qr.getModuleCount(), isBackground = this.options.imageOptions.mode == ImageMode.background, padding = isBackground ? 1 : 0;
+        for (let plugin of this.options.plugins || []) if (mask = plugin.applyMask?.(moduleCount, padding) || void 0, 
+        mask) break;
+        if (mask) {
+            let {startX, startY} = mask, columns = mask.mask.slice(startX, startX + moduleCount);
+            if (startX < padding || startY < padding || startX + moduleCount + padding > mask.mask.length || columns.length < moduleCount || columns.some(col => startY + moduleCount + padding > col.length)) throw new Error(padding ? `The mask must extend ${padding} segment(s) beyond the QR code on each side` : "The QR code must lie inside the mask");
+            if ([ [ 0, 0 ], [ moduleCount - 7, 0 ], [ 0, moduleCount - 7 ] ].some(([x, y]) => columns.slice(x, x + 7).some(col => col.slice(startY + y, startY + y + 7).some(v => !v)))) throw new Error("The QR code corners must not be hidden by the mask");
+        }
+        if (mask) {
+            let dotSize = this.options.dotsOptions.size, margin = isBackground ? 1 + (this.options.imageOptions.margin || 0) : 0;
+            size = Math.ceil(dotSize * (moduleCount + 2 * margin));
+            let beginning = Math.floor((size - moduleCount * dotSize) / 2);
+            appliedMask = {
+                ...mask,
+                count: moduleCount,
+                dotSize,
+                x: beginning - mask.startX * dotSize,
+                y: beginning - mask.startY * dotSize
+            };
+        } else {
+            this.options.imageOptions.mode == ImageMode.background && this.options.shape != ShapeType.circle && (moduleCount += 2);
+            let count = Math.ceil((this.options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * moduleCount);
+            count % 2 == 0 && (count -= 1);
+            let margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0;
+            this.options.imageOptions.mode == ImageMode.background && (margin += this.options.imageOptions.margin || 0), 
+            size = Math.ceil(this.options.dotsOptions.size * (count + 2 * margin));
+        }
         this.qrSVG = new QRSVG({
             ...this.options,
+            ...mask && {
+                shape: ShapeType.square,
+                backgroundOptions: void 0
+            },
             width: size,
             height: size,
             size,
+            mask,
             errorCorrectionPercent: ErrorCorrectionPercents[this.options.qrOptions.errorCorrectionLevel]
-        }), this.svgDrawingPromise = this.qrSVG.drawQR(this.qr).then(() => {
-            this.qrSVG?.element && (this.options.plugins?.forEach(plugin => plugin.postProcess?.(this.qrSVG.element, {
-                ...this.options,
-                width: size,
-                height: size,
-                size
-            }, {
-                dots: this.qrSVG?.dotsColor,
-                background: this.qrSVG?.backgroundColor
-            })), this.extension?.(this.qrSVG.element, {
-                ...this.options,
-                width: size,
-                height: size,
-                size
-            }));
+        }), this.svgDrawingPromise = this.qrSVG.drawQR(this.qr).then(async () => {
+            if (this.qrSVG?.element) {
+                if (this.options.plugins) for (let plugin of this.options.plugins) await (plugin.postProcess?.(this.qrSVG.element, {
+                    ...this.options,
+                    width: size,
+                    height: size,
+                    size,
+                    mask: appliedMask
+                }, {
+                    dots: this.qrSVG?.dotsColor,
+                    background: this.qrSVG?.backgroundColor
+                }));
+                this.extension?.(this.qrSVG.element, {
+                    ...this.options,
+                    width: size,
+                    height: size,
+                    size,
+                    mask: appliedMask
+                });
+            }
         });
     }
 };
@@ -1299,8 +1504,8 @@ class QRCodeStyling extends QRCodeStyling$1 {
             imageTools: options.imageTools || {
                 toDataURL: url => "string" == typeof url && url.startsWith("data:") ? Promise.resolve(url) : loadImage(url).then(({contentType, data}) => `data:${contentType?.replace("application/xml", "image/svg+xml")};base64,${data.toString("base64")}`),
                 getSize: async src => {
-                    let {data} = Buffer.isBuffer(options.image) ? {
-                        data: options.image
+                    let {data} = Buffer.isBuffer(src) ? {
+                        data: src
                     } : await loadImage(src), meta = await sharp(data).metadata();
                     return {
                         width: meta.width,