@liquid-js/qr-code-styling 2.4.2 → 3.0.0-1

package/lib/core/QRSVG.d.ts

@@ -6,13 +6,21 @@ export declare class QRSVG {
     /** @ignore */
     _defs: SVGElement;
     /** @ignore */
-    _backgroundClipPath?: SVGElement;
+    _backgroundMask?: SVGElement;
     /** @ignore */
-    _dotsClipPath?: SVGElement;
+    _backgroundMaskGroup?: SVGElement;
     /** @ignore */
-    _cornersSquareClipPath?: SVGElement;
+    _dotsMask?: SVGElement;
     /** @ignore */
-    _cornersDotClipPath?: SVGElement;
+    _dotsMaskGroup?: SVGElement;
+    /** @ignore */
+    _cornersSquareMask?: SVGElement;
+    /** @ignore */
+    _cornersSquareMaskGroup?: SVGElement;
+    /** @ignore */
+    _cornersDotMask?: SVGElement;
+    /** @ignore */
+    _cornersDotMaskGroup?: SVGElement;
     /** @ignore */
     _options: RequiredOptions;
     /** @ignore */
@@ -46,4 +54,5 @@ export declare class QRSVG {
         width: number;
         name: string;
     }): void;
+    _createMask(id: string): (SVGGElement | SVGMaskElement)[];
 }

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

@@ -1240,15 +1240,14 @@ class QRSVG {
             });
             const size = Math.min(options.width, options.height);
             const element = this._document.createElementNS("http://www.w3.org/2000/svg", "rect");
-            this._backgroundClipPath = this._document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-            this._backgroundClipPath.setAttribute("id", "clip-path-background-color");
-            this._defs.appendChild(this._backgroundClipPath);
+            [this._backgroundMask, this._backgroundMaskGroup] = this._createMask("mask-background-color");
+            this._defs.appendChild(this._backgroundMask);
             element.setAttribute("x", String((options.width - size) / 2));
             element.setAttribute("y", String((options.height - size) / 2));
             element.setAttribute("width", String(size));
             element.setAttribute("height", String(size));
             element.setAttribute("rx", String((size / 2) * (options.backgroundOptions.round || 0)));
-            this._backgroundClipPath.appendChild(element);
+            this._backgroundMaskGroup.appendChild(element);
         }
     }
     drawDots(filter) {
@@ -1265,19 +1264,8 @@ class QRSVG {
         const xBeginning = Math.floor((options.width - count * dotSize) / 2);
         const yBeginning = Math.floor((options.height - count * dotSize) / 2);
         const dot = new QRDot({ svg: this._element, type: options.dotsOptions.type, document: this._document });
-        this._dotsClipPath = this._document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-        this._dotsClipPath.setAttribute("id", "clip-path-dot-color");
-        this._defs.appendChild(this._dotsClipPath);
-        this._createColor({
-            options: options.dotsOptions?.gradient,
-            color: options.dotsOptions.color,
-            additionalRotation: 0,
-            x: 0,
-            y: 0,
-            height: options.height,
-            width: options.width,
-            name: "dot-color"
-        });
+        [this._dotsMask, this._dotsMaskGroup] = this._createMask("mask-dot-color");
+        this._defs.appendChild(this._dotsMask);
         for (let i = 0; i < count; i++) {
             for (let j = 0; j < count; j++) {
                 if (filter && !filter(i, j)) {
@@ -1293,17 +1281,23 @@ class QRSVG {
                         return false;
                     return !!this._qr && this._qr.isDark(j + yOffset, i + xOffset);
                 });
-                if (dot._element && this._dotsClipPath) {
-                    this._dotsClipPath.appendChild(dot._element);
+                if (dot._element && this._dotsMask) {
+                    this._dotsMaskGroup.appendChild(dot._element);
                 }
             }
         }
+        let colorX = xBeginning;
+        let colorY = yBeginning;
+        let colorCount = count;
         if (options.shape === ShapeType.circle) {
             const margin = (this._options.backgroundOptions && this._options.backgroundOptions.margin) || 0;
             const additionalDots = Math.floor((minSize / dotSize - count - 2 * margin) / 2);
             const fakeCount = count + additionalDots * 2;
             const xFakeBeginning = xBeginning - additionalDots * dotSize;
             const yFakeBeginning = yBeginning - additionalDots * dotSize;
+            colorX = xFakeBeginning;
+            colorY = yFakeBeginning;
+            colorCount = count + additionalDots * 2;
             const fakeMatrix = [];
             const center = Math.floor(fakeCount / 2);
             for (let i = 0; i < fakeCount; i++) {
@@ -1333,12 +1327,22 @@ class QRSVG {
                     dot.draw(xFakeBeginning + i * dotSize, yFakeBeginning + j * dotSize, dotSize, (xOffset, yOffset) => {
                         return !!fakeMatrix[i + xOffset]?.[j + yOffset];
                     });
-                    if (dot._element && this._dotsClipPath) {
-                        this._dotsClipPath.appendChild(dot._element);
+                    if (dot._element && this._dotsMask) {
+                        this._dotsMaskGroup.appendChild(dot._element);
                     }
                 }
             }
         }
+        this._createColor({
+            options: options.dotsOptions?.gradient,
+            color: options.dotsOptions.color,
+            additionalRotation: 0,
+            x: colorX,
+            y: colorY,
+            height: colorCount * dotSize,
+            width: colorCount * dotSize,
+            name: "dot-color"
+        });
     }
     drawCorners() {
         if (!this._qr) {
@@ -1362,13 +1366,15 @@ class QRSVG {
         ].forEach(([column, row, rotation]) => {
             const x = xBeginning + column * dotSize * (count - 7);
             const y = yBeginning + row * dotSize * (count - 7);
-            let cornersSquareClipPath = this._dotsClipPath;
-            let cornersDotClipPath = this._dotsClipPath;
+            let cornersSquareMask = this._dotsMask;
+            let cornersSquareMaskGroup = this._dotsMaskGroup;
+            let cornersDotMask = this._dotsMask;
+            let cornersDotMaskGroup = this._dotsMaskGroup;
             if (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) {
-                cornersSquareClipPath = this._document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-                cornersSquareClipPath.setAttribute("id", `clip-path-corners-square-color-${column}-${row}`);
-                this._defs.appendChild(cornersSquareClipPath);
-                this._cornersSquareClipPath = this._cornersDotClipPath = cornersDotClipPath = cornersSquareClipPath;
+                [cornersSquareMask, cornersSquareMaskGroup] = this._createMask(`mask-corners-square-color-${column}-${row}`);
+                this._defs.appendChild(cornersSquareMask);
+                this._cornersSquareMask = this._cornersDotMask = cornersDotMask = cornersSquareMask;
+                this._cornersSquareMaskGroup = this._cornersDotMaskGroup = cornersDotMaskGroup = cornersSquareMaskGroup;
                 this._createColor({
                     options: options.cornersSquareOptions?.gradient,
                     color: options.cornersSquareOptions?.color,
@@ -1387,8 +1393,8 @@ class QRSVG {
                     document: this._document
                 });
                 cornersSquare.draw(x, y, cornersSquareSize, rotation);
-                if (cornersSquare._element && cornersSquareClipPath) {
-                    cornersSquareClipPath.appendChild(cornersSquare._element);
+                if (cornersSquare._element && cornersSquareMaskGroup) {
+                    cornersSquareMaskGroup.appendChild(cornersSquare._element);
                 }
             }
             else {
@@ -1399,17 +1405,17 @@ class QRSVG {
                             continue;
                         }
                         dot.draw(x + i * dotSize, y + j * dotSize, dotSize, (xOffset, yOffset) => !!squareMask[i + xOffset]?.[j + yOffset]);
-                        if (dot._element && cornersSquareClipPath) {
-                            cornersSquareClipPath.appendChild(dot._element);
+                        if (dot._element && cornersSquareMaskGroup) {
+                            cornersSquareMaskGroup.appendChild(dot._element);
                         }
                     }
                 }
             }
             if (options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) {
-                cornersDotClipPath = this._document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-                cornersDotClipPath.setAttribute("id", `clip-path-corners-dot-color-${column}-${row}`);
-                this._defs.appendChild(cornersDotClipPath);
-                this._cornersDotClipPath = cornersDotClipPath;
+                [cornersDotMask, cornersDotMaskGroup] = this._createMask(`mask-corners-dot-color-${column}-${row}`);
+                this._defs.appendChild(cornersDotMask);
+                this._cornersDotMask = cornersDotMask;
+                this._cornersDotMaskGroup = cornersDotMaskGroup;
                 this._createColor({
                     options: options.cornersDotOptions?.gradient,
                     color: options.cornersDotOptions?.color,
@@ -1428,8 +1434,8 @@ class QRSVG {
                     document: this._document
                 });
                 cornersDot.draw(x + dotSize * 2, y + dotSize * 2, cornersDotSize, rotation);
-                if (cornersDot._element && cornersDotClipPath) {
-                    cornersDotClipPath.appendChild(cornersDot._element);
+                if (cornersDot._element && cornersDotMaskGroup) {
+                    cornersDotMaskGroup.appendChild(cornersDot._element);
                 }
             }
             else {
@@ -1440,8 +1446,8 @@ class QRSVG {
                             continue;
                         }
                         dot.draw(x + i * dotSize, y + j * dotSize, dotSize, (xOffset, yOffset) => !!dotMask[i + xOffset]?.[j + yOffset]);
-                        if (dot._element && cornersDotClipPath) {
-                            cornersDotClipPath.appendChild(dot._element);
+                        if (dot._element && cornersDotMaskGroup) {
+                            cornersDotMaskGroup.appendChild(dot._element);
                         }
                     }
                 }
@@ -1459,7 +1465,7 @@ class QRSVG {
         const dh = height - margin * 2;
         const imageUrl = await this._imageTools.toDataURL(options.image || "");
         let image = this._document.createElementNS("http://www.w3.org/2000/svg", "image");
-        image.setAttribute("href", imageUrl || "");
+        image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", imageUrl || "");
         if (imageUrl.startsWith("data:image/svg+xml;")) {
             let data = imageUrl.substring(19);
             const i = data.indexOf(",");
@@ -1494,7 +1500,7 @@ class QRSVG {
         rect.setAttribute("y", String(y));
         rect.setAttribute("height", String(height));
         rect.setAttribute("width", String(width));
-        rect.setAttribute("clip-path", `url('#clip-path-${name}')`);
+        rect.setAttribute("style", `mask:url(#mask-${name})`);
         if (options) {
             let gradient;
             if (options.type === GradientType.radial) {
@@ -1553,7 +1559,7 @@ class QRSVG {
                 stop.setAttribute("stop-color", color);
                 gradient.appendChild(stop);
             });
-            rect.setAttribute("fill", `url('#${name}')`);
+            rect.setAttribute("fill", `url(#${name})`);
             this._defs.appendChild(gradient);
         }
         else if (color) {
@@ -1561,6 +1567,20 @@ class QRSVG {
         }
         this._element.appendChild(rect);
     }
+    _createMask(id) {
+        const options = this._options;
+        const mask = this._document.createElementNS("http://www.w3.org/2000/svg", "mask");
+        mask.setAttribute("id", id);
+        mask.setAttribute("maskUnits", "userSpaceOnUse");
+        mask.setAttribute("x", "0");
+        mask.setAttribute("y", "0");
+        mask.setAttribute("width", String(options.width));
+        mask.setAttribute("height", String(options.height));
+        const group = this._document.createElementNS("http://www.w3.org/2000/svg", "g");
+        group.setAttribute("fill", "#fff");
+        mask.appendChild(group);
+        return [mask, group];
+    }
 }
 
 let QRCodeStyling$1 = class QRCodeStyling {