From df3b3f3c8e480d2331ece562048ee9fcd03feddf Mon Sep 17 00:00:00 2001 From: plainheart Date: Fri, 2 Aug 2024 15:01:22 +0800 Subject: [PATCH] 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