fix: implement CSP-compatible SVG icon rendering using Path mode (#3319)

Alexzjt · web-flow · commit 0fba0c365257 · 2026-03-06T17:47:26.000+08:00
* fix: implement CSP-compatible SVG icon rendering using Path mode

* refactor: 修复 CR 意见

* test: 修复单测问题
diff --git a/packages/s2-core/__tests__/spreadsheet/header-action-icons-spec.ts b/packages/s2-core/__tests__/spreadsheet/header-action-icons-spec.ts
@@ -195,7 +195,7 @@ describe('HeaderActionIcons Tests', () => {
     const positions = s2.facet.getRowCells().map((cell) => {
       return cell
         .getActionIcons()
-        .map((icon) => pick(icon.iconImageShape.attributes, ['x', 'y']));
+        .map((icon) => pick(icon.getCfg(), ['x', 'y']));
     });
 
     expect(positions).toMatchSnapshot();
diff --git a/packages/s2-core/__tests__/unit/common/icons/gui-icon-spec.ts b/packages/s2-core/__tests__/unit/common/icons/gui-icon-spec.ts
@@ -140,4 +140,174 @@ describe('GuiIcon Tests', () => {
 
     expect(render).not.toThrow();
   });
+
+  // https://github.com/antvis/S2/issues/3125
+  describe('CSP-compatible Path mode rendering', () => {
+    test('should render built-in SVG icons using Path mode', () => {
+      const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      const icon = new GuiIcon({
+        name: 'Plus',
+        x: 10,
+        y: 10,
+        width: 16,
+        height: 16,
+      });
+
+      // Path 模式下应该有 iconPathShapes
+      expect(icon.iconPathShapes.length).toBeGreaterThan(0);
+      // Path 模式下不应该使用 Image
+      expect(icon.iconImageShape).toBeUndefined();
+      expect(icon).toBeInstanceOf(Group);
+      expect(errSpy).not.toHaveBeenCalled();
+
+      errSpy.mockRestore();
+    });
+
+    test('should render Minus icon using Path mode', () => {
+      const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      const icon = new GuiIcon({
+        name: 'Minus',
+        x: 0,
+        y: 0,
+        width: 16,
+        height: 16,
+      });
+
+      expect(icon.iconPathShapes.length).toBeGreaterThan(0);
+      expect(icon.iconImageShape).toBeUndefined();
+      expect(errSpy).not.toHaveBeenCalled();
+
+      errSpy.mockRestore();
+    });
+
+    test('should apply cursor style to Path mode icons', () => {
+      const icon = new GuiIcon({
+        name: 'Plus',
+        x: 0,
+        y: 0,
+        width: 16,
+        height: 16,
+        cursor: 'pointer',
+      });
+
+      expect(icon.iconPathShapes.length).toBeGreaterThan(0);
+
+      // 第一个 shape 是 hitArea Rect，应该有 cursor 样式
+      const hitAreaRect = icon.iconPathShapes[0];
+
+      expect(hitAreaRect.style.cursor).toBe('pointer');
+    });
+
+    test('should render tree icons in tree mode table without errors', async () => {
+      const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      const s2 = createPivotSheet({
+        width: 400,
+        height: 300,
+        hierarchyType: 'tree',
+      });
+
+      await s2.render();
+
+      // 验证没有 CSP 或 SVG 解析错误
+      expect(errSpy).not.toHaveBeenCalled();
+
+      // 验证 row cells 存在 (tree mode 应该有展开折叠图标)
+      const rowCells = s2.facet.getRowCells();
+
+      expect(rowCells.length).toBeGreaterThan(0);
+
+      s2.destroy();
+      errSpy.mockRestore();
+    });
+
+    test('should update fill color in Path mode', () => {
+      const icon = new GuiIcon({
+        name: 'Plus',
+        x: 0,
+        y: 0,
+        width: 16,
+        height: 16,
+        fill: 'red',
+      });
+
+      expect(icon.iconPathShapes.length).toBeGreaterThan(0);
+
+      // 更新 fill
+      icon.setImageAttrs({ fill: 'blue' });
+
+      // Path shapes 的 fill 应该更新
+      const pathShape = icon.iconPathShapes[1]; // 第一个是 hitArea
+
+      expect(pathShape.style.fill).toBe('blue');
+    });
+
+    test('should reRender icon with new name in Path mode', () => {
+      const icon = new GuiIcon({
+        name: 'Plus',
+        x: 0,
+        y: 0,
+        width: 16,
+        height: 16,
+      });
+
+      expect(icon.iconPathShapes.length).toBeGreaterThan(0);
+
+      // reRender with new name
+      icon.reRender({
+        name: 'Minus',
+        x: 0,
+        y: 0,
+        width: 16,
+        height: 16,
+      });
+
+      expect(icon.name).toBe('Minus');
+      expect(icon.iconPathShapes.length).toBeGreaterThan(0);
+    });
+
+    test('should updatePosition correctly in Path mode', () => {
+      const icon = new GuiIcon({
+        name: 'Plus',
+        x: 0,
+        y: 0,
+        width: 16,
+        height: 16,
+      });
+
+      icon.updatePosition({ x: 50, y: 100 });
+
+      // 验证 path shapes 的 transform 包含新位置
+      const pathShape = icon.iconPathShapes[1];
+
+      expect(pathShape.style.transform).toContain('50');
+      expect(pathShape.style.transform).toContain('100');
+    });
+
+    test('should toggle visibility in Path mode', () => {
+      const icon = new GuiIcon({
+        name: 'Plus',
+        x: 0,
+        y: 0,
+        width: 16,
+        height: 16,
+      });
+
+      // 隐藏
+      icon.toggleVisibility(false);
+
+      icon.iconPathShapes.forEach((shape) => {
+        expect(shape.style.visibility).toBe('hidden');
+      });
+
+      // 显示
+      icon.toggleVisibility(true);
+
+      icon.iconPathShapes.forEach((shape) => {
+        expect(shape.style.visibility).toBe('visible');
+      });
+    });
+  });
 });
diff --git a/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts b/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts
@@ -929,14 +929,15 @@ describe('Interaction Event Controller Tests', () => {
       spreadsheet.container.appendChild(guiIcon); // 加入 g 渲染树才有事件传递
       spreadsheet.once(event, handler);
 
-      // 内部的 GuiIcon
-      const { iconImageShape } = guiIcon;
+      // 内部的 GuiIcon (兼容 Path 模式和 Image 模式)
+      // Path 模式下使用 iconPathShapes, Image 模式下使用 iconImageShape
+      const targetShape = guiIcon.iconPathShapes[0] || guiIcon.iconImageShape;
 
       Object.defineProperty(eventController, 'target', {
-        value: iconImageShape,
+        value: targetShape,
         writable: true,
       });
-      iconImageShape.dispatchEvent(
+      targetShape.dispatchEvent(
         createFederatedPointerEvent(spreadsheet, OriginEventType.POINTER_UP),
       );
 
@@ -1028,14 +1029,14 @@ describe('Interaction Event Controller Tests', () => {
       spreadsheet.container.appendChild(guiIcon); // 加入 g 渲染树才有事件传递
       spreadsheet.once(event, handler);
 
-      // 内部的 GuiIcon
-      const { iconImageShape } = guiIcon;
+      // 内部的 GuiIcon (兼容 Path 模式和 Image 模式)
+      const targetShape = guiIcon.iconPathShapes[0] || guiIcon.iconImageShape;
 
       Object.defineProperty(eventController, 'target', {
-        value: iconImageShape,
+        value: targetShape,
         writable: true,
       });
-      iconImageShape.dispatchEvent(
+      targetShape.dispatchEvent(
         createFederatedPointerEvent(spreadsheet, OriginEventType.CLICK),
       );
 
diff --git a/packages/s2-core/src/common/icons/gui-icon.ts b/packages/s2-core/src/common/icons/gui-icon.ts
