fix(svg): not convert 'transparent' color to 'none' to fix gradient color rendering bug

plainheart · plainheart · commit 7f423d6c21d3 · 2024-08-02T12:24:29.000+08:00
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>

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ const mathRound = Math.round;`
`16`	`16`
`17`	`17`	`export function normalizeColor(color: string): { color: string; opacity: number; } {`
`18`	`18`	`let opacity;`
`19`		`- if (!color \|\| color === 'transparent') {`
	`19`	`+ if (!color) {`
`20`	`20`	`color = 'none';`
`21`	`21`	`}`
`22`	`22`	`else if (typeof color === 'string' && color.indexOf('rgba') > -1) {`