fix(layout): 修复 Firefox 浏览器部分 icon 渲染失败 close #1571 (#1599)

antvis · Jul 22, 2022 · 6b76c4e · 6b76c4e
1 parent b2ff70e
commit 6b76c4e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/packages/s2-core/src/common/icons/gui-icon.ts b/packages/s2-core/src/common/icons/gui-icon.ts
@@ -69,12 +69,13 @@ export class GuiIcon extends Group {
           svg = svg.replace(/fill=[\'\"]#?\w+[\'\"]/g, ''); // 移除 fill="red|#fff"
           svg = svg.replace(/fill>/g, '>'); // fill> 替换为 >
         }
+        svg = svg.replace(
+          STYLE_PLACEHOLDER,
+          `${STYLE_PLACEHOLDER} fill="${fill}"`,
+        );
+        // 兼容 Firefox: https://github.com/antvis/S2/issues/1571 https://stackoverflow.com/questions/30733607/svg-data-image-not-working-as-a-background-image-in-a-pseudo-element/30733736#30733736
         // https://www.chromestatus.com/features/5656049583390720
-        // # 井号不能当做svg的body，这个bug在chrome72已经修复.
-        svg = svg
-          .replace(STYLE_PLACEHOLDER, `${STYLE_PLACEHOLDER} fill="${fill}"`)
-          .replace(/#/g, '%23');
-        img.src = `data:image/svg+xml;utf-8,${svg}`;
+        img.src = `data:image/svg+xml;utf-8,${encodeURIComponent(svg)}`;
       }
     });
   }

diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less b/packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less
@@ -44,6 +44,7 @@
 
     .header-label {
       font-weight: 700;
+      margin-right: 20px;
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,6 +44,7 @@ @@
         .header-label {
           font-weight: 700;
+          margin-right: 20px;
         }
       }
@@ Expand Down @@