From df3b3f3c8e480d2331ece562048ee9fcd03feddf Mon Sep 17 00:00:00 2001 From: plainheart Date: Fri, 2 Aug 2024 15:01:22 +0800 Subject: [PATCH 1/3] fix(svg): parse opacity of empty/'none'/'transparent' color as 0 and add warning for development environment --- src/svg/helper.ts | 10 +++++- test/svg-gradient.html | 75 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 test/svg-gradient.html diff --git a/src/svg/helper.ts b/src/svg/helper.ts index c8eaa2b84..de2a9ab08 100644 --- a/src/svg/helper.ts +++ b/src/svg/helper.ts @@ -15,6 +15,12 @@ import env from '../core/env'; const mathRound = Math.round; export function normalizeColor(color: string): { color: string; opacity: number; } { + if (process.env.NODE_ENV !== 'production') { + if (!color || color === 'none' || color === 'transparent') { + console.warn(`'${color}' is an illegal value for transparency in SVG, please use 'rgba(r,g,b,0)' instead.`); + } + } + let opacity; if (!color || color === 'transparent') { color = 'none'; @@ -29,7 +35,9 @@ export function normalizeColor(color: string): { color: string; opacity: number; } return { color, - opacity: opacity == null ? 1 : opacity + opacity: opacity == null + ? color === 'none' ? 0 : 1 + : opacity }; } const EPSILON = 1e-4; diff --git a/test/svg-gradient.html b/test/svg-gradient.html new file mode 100644 index 000000000..ee053ede2 --- /dev/null +++ b/test/svg-gradient.html @@ -0,0 +1,75 @@ + + + + + SVG Gradient + + + + + +
+ + + \ No newline at end of file From f4ad69741fcd58ab7d2dd20235f32555dcce7768 Mon Sep 17 00:00:00 2001 From: plainheart Date: Fri, 2 Aug 2024 15:32:13 +0800 Subject: [PATCH 2/3] test(svg): update test case --- test/svg-gradient.html | 116 +++++++++++++++++++++++------------------ 1 file changed, 65 insertions(+), 51 deletions(-) diff --git a/test/svg-gradient.html b/test/svg-gradient.html index ee053ede2..64505d27a 100644 --- a/test/svg-gradient.html +++ b/test/svg-gradient.html @@ -8,68 +8,82 @@ -
+
+
+ \ No newline at end of file From 930de260d2ae7d2c11dada0f15405529731f9a67 Mon Sep 17 00:00:00 2001 From: Zhongxiang Wang Date: Mon, 11 Nov 2024 10:20:26 +0800 Subject: [PATCH 3/3] chore(svg): tweak warnning wording for unrecommended transparency value --- src/svg/helper.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/svg/helper.ts b/src/svg/helper.ts index de2a9ab08..de5b25b2e 100644 --- a/src/svg/helper.ts +++ b/src/svg/helper.ts @@ -17,7 +17,7 @@ const mathRound = Math.round; export function normalizeColor(color: string): { color: string; opacity: number; } { if (process.env.NODE_ENV !== 'production') { if (!color || color === 'none' || color === 'transparent') { - console.warn(`'${color}' is an illegal value for transparency in SVG, please use 'rgba(r,g,b,0)' instead.`); + console.warn(`'${color}' is not recommended value for transparency in SVG, please use 'rgba(r,g,b,0)' instead.`); } } @@ -197,4 +197,4 @@ export const encodeBase64 = (function () { } return null; }; -})(); \ No newline at end of file +})();