fix(svg): duplicate id for background rect with multiple charts

ecomfe · Apr 3, 2023 · 4ca836e · 4ca836e
1 parent 9377dd2
commit 4ca836e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/svg/Painter.ts b/src/svg/Painter.ts
@@ -143,7 +143,7 @@ class SVGPainter implements PainterBase {
 
         const children: SVGVNode[] = [];
 
-        const bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
+        const bgVNode = this._bgVNode = createBackgroundVNode(this._id, width, height, this._backgroundColor, scope);
         bgVNode && children.push(bgVNode);
 
         // Ignore the root g if wan't the output to be more tight.
@@ -360,6 +360,7 @@ function createMethodNotSupport(method: string): any {
 }
 
 function createBackgroundVNode(
+    zrId: string,
     width: number,
     height: number,
     backgroundColor: SVGPainterBackgroundColor,
@@ -375,7 +376,7 @@ function createBackgroundVNode(
                 height,
                 x: '0',
                 y: '0',
-                id: '0'
+                id: zrId + '-bg'
             }
         );
         if (isGradient(backgroundColor)) {

diff --git a/test/svg-backgroundColor.html b/test/svg-backgroundColor.html
@@ -16,6 +16,9 @@
 </head>
 <body>
     <div id="main" style="width:100vw;height:100vh;"></div>
+
+    <h2>This should not have a rect with the same id as the above instance.</h2>
+    <div id="main2" style="width:100vw;height:100vh;"></div>
     <div class="opt-bar">
         <button onclick="updateBg()">Change Background</button>
         <select id="repeat">
@@ -42,7 +45,12 @@
         }
     });
     zr.add(txt);
-
+
+    var zr2 = zrender.init(document.getElementById('main2'), {
+        renderer: 'svg'
+    });
+    zr2.add(txt);
+
     var linearGradient = new zrender.LinearGradient();
     linearGradient.addColorStop(0, '#a598e1');
     linearGradient.addColorStop(1, '#14c4ba');
@@ -95,8 +103,8 @@
         else {
             bg = text = 'none';
         }
-        console.log(text);
         zr.setBackgroundColor(bg);
+        zr2.setBackgroundColor(bg);
         txt.setStyle({ text: 'SVG BackgroundColor: ' + text });
         i++;
     }