fix(svg): not convert 'transparent' color to 'none' to fix gradie…

…nt color rendering bug
ecomfe · Aug 2, 2024 · 7f423d6 · 7f423d6
1 parent 247e119
commit 7f423d6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/src/svg/helper.ts b/src/svg/helper.ts
@@ -16,7 +16,7 @@ const mathRound = Math.round;
 
 export function normalizeColor(color: string): { color: string; opacity: number; } {
     let opacity;
-    if (!color || color === 'transparent') {
+    if (!color) {
         color = 'none';
     }
     else if (typeof color === 'string' && color.indexOf('rgba') > -1) {

diff --git a/test/svg-gradient.html b/test/svg-gradient.html
@@ -0,0 +1,39 @@
+<!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 linearGradient = new zrender.LinearGradient(0, 0, 0, 1);
+        linearGradient.addColorStop(0, 'transparent');
+        linearGradient.addColorStop(1, 'orange');
+
+        zr.add(
+            new zrender.Rect({
+                shape: {
+                    x: 100,
+                    y: 100,
+                    width: 20,
+                    height: 100,
+                },
+                style: {
+                    fill: linearGradient
+                }
+            })
+        );
+    </script>
+</body>
+</html>