From a8ae9bf2713de4da942508cba4c80edd75aa8c8c Mon Sep 17 00:00:00 2001 From: Denys Kozak Date: Wed, 16 Oct 2024 19:52:22 +0300 Subject: [PATCH 1/2] Create background rect for all backgrounds --- src/core/QRSVG.ts | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/core/QRSVG.ts b/src/core/QRSVG.ts index 8708adff..0f674549 100644 --- a/src/core/QRSVG.ts +++ b/src/core/QRSVG.ts @@ -153,19 +153,6 @@ export default class QRSVG { const color = options.backgroundOptions?.color; if (gradientOptions || color) { - this._createColor({ - options: gradientOptions, - color: color, - additionalRotation: 0, - x: 0, - y: 0, - height: options.height, - width: options.width, - name: `background-color-${this._instanceId}` - }); - } - - if (options.backgroundOptions?.round) { const size = Math.min(options.width, options.height); const element = document.createElementNS("http://www.w3.org/2000/svg", "rect"); this._backgroundClipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"); @@ -179,6 +166,17 @@ export default class QRSVG { element.setAttribute("rx", String((size / 2) * options.backgroundOptions.round)); this._backgroundClipPath.appendChild(element); + + this._createColor({ + options: gradientOptions, + color: color, + additionalRotation: 0, + x: 0, + y: 0, + height: options.height, + width: options.width, + name: `background-color-${this._instanceId}` + }); } } } From 095eb48bfb706fbdc219a222c611cf7527331968 Mon Sep 17 00:00:00 2001 From: Denys Kozak Date: Wed, 16 Oct 2024 21:57:09 +0300 Subject: [PATCH 2/2] Fix node support --- src/assets/test/image_from_readme.svg | 2 +- src/core/QRSVG.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/assets/test/image_from_readme.svg b/src/assets/test/image_from_readme.svg index faf1be5f..6837c6fa 100644 --- a/src/assets/test/image_from_readme.svg +++ b/src/assets/test/image_from_readme.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/core/QRSVG.ts b/src/core/QRSVG.ts index 0f674549..9f7148ef 100644 --- a/src/core/QRSVG.ts +++ b/src/core/QRSVG.ts @@ -154,8 +154,8 @@ export default class QRSVG { if (gradientOptions || color) { const size = Math.min(options.width, options.height); - const element = document.createElementNS("http://www.w3.org/2000/svg", "rect"); - this._backgroundClipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"); + const element = this._window.document.createElementNS("http://www.w3.org/2000/svg", "rect"); + this._backgroundClipPath = this._window.document.createElementNS("http://www.w3.org/2000/svg", "clipPath"); this._backgroundClipPath.setAttribute("id", `clip-path-background-color-${this._instanceId}`); this._defs.appendChild(this._backgroundClipPath);