fix(svg): parse opacity of empty/'none'/'transparent' color as 0 and add warning for development environment

plainheart · plainheart · commit df3b3f3c8e48 · 2024-08-02T15:01:27.000+08:00
diff --git 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
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>SVG Gradient</title>
+    <script src="./lib/config.js"></script>
+    <script src="../dist/zrender.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body>
+    <div id="main"></div>
+    <script type="text/javascript">
+        var zr = zrender.init(document.getElementById('main'), {
+            renderer: 'svg',
+            width: 200,
+            height: 200
+        });
+        zr.setBackgroundColor('navajowhite');
+
+        var linearGradient1 = new zrender.LinearGradient(0, 0, 0, 1);
+        linearGradient1.addColorStop(0, 'transparent');
+        linearGradient1.addColorStop(1, 'orange');
+
+        var linearGradient2 = new zrender.LinearGradient(0, 0, 0, 1);
+        linearGradient2.addColorStop(0, 'none');
+        linearGradient2.addColorStop(1, 'orange');
+
+        var linearGradient3 = new zrender.LinearGradient(0, 0, 0, 1);
+        linearGradient3.addColorStop(0, '');
+        linearGradient3.addColorStop(1, 'orange');
+
+        zr.add(
+            new zrender.Rect({
+                shape: {
+                    x: 20,
+                    y: 50,
+                    width: 20,
+                    height: 100,
+                },
+                style: {
+                    fill: linearGradient1
+                }
+            })
+        );
+
+        zr.add(
+            new zrender.Rect({
+                shape: {
+                    x: 60,
+                    y: 50,
+                    width: 20,
+                    height: 100,
+                },
+                style: {
+                    fill: linearGradient2
+                }
+            })
+        );
+
+        zr.add(
+            new zrender.Rect({
+                shape: {
+                    x: 100,
+                    y: 50,
+                    width: 20,
+                    height: 100,
+                },
+                style: {
+                    fill: linearGradient3
+                }
+            })
+        );
+    </script>
+</body>
+</html>
