antvis / antvis/S2

🐛 兼容性问题:svg icon 在ie浏览器中不展示

Open
#2,232 1 comment 0 reactions 0 assignees View on GitHub
💤 inactive
Dominant language
TypeScript
Stars
1.7k
Forks
220
PR merge metrics
No merged PRs in 30d

Description

### 🏷 Version

| Package | Version |
| -------------- | ------- |
| @antv/s2 | 1.47.1 |

### Sheet Type

- [x] PivotSheet
- [ ] TableSheet
- [ ] GridAnalysisSheet
- [ ] StrategySheet
- [ ] EditableSheet

### 🖋 Description

使用umi3.x搭建的项目,配置浏览器兼容ie10+,icon无法展示,并且在控制台有报错信息,chrome可以正常展示,如下图所示:

![image](https://github.com/antvis/S2/assets/17588475/220f877c-0437-4d6b-9c30-765748c9bd54)

![image](https://github.com/antvis/S2/assets/17588475/aaefe69b-13bf-4e5d-a263-ef36cfe50747)

### ⌨️ Code Snapshots

.umirc.ts
```
export default {
targets: {
ie: 10,
},
dva: {},
antd: {},
chainWebpack(config) {
config.merge({
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|less)$/,
chunks: 'async',
minChunks: 2,
minSize: 0,
},
vendors: {
name: 'vendors',
test({ resource }) {
return /[\\/]node_modules[\\/]/.test(resource);
},
priority: 10,
chunks: 'all',
minSize: 30000,
minChunks: 3,
automaticNameDelimiter: '.',
},
},
},
},
});
},
ignoreMomentLocale: true,
metas: [{ 'http-equiv': 'A-UA-Compatible', content: 'IE=Edge,chrome=1' }],
extraBabelPlugins: ['lodash'],
plugins: ['lodash-webpack-plugin'],
};
```
package.json

```

export default {
targets: {
ie: 10,
},
dva: {},
antd: {},
chainWebpack(config) {
config.merge({
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|less)$/,
chunks: 'async',
minChunks: 2,
minSize: 0,
},
vendors: {
name: 'vendors',
test({ resource }) {
return /[\\/]node_modules[\\/]/.test(resource);
},
priority: 10,
chunks: 'all',
minSize: 30000,
minChunks: 3,
automaticNameDelimiter: '.',
},
},
},
},
});
},
ignoreMomentLocale: true,
metas: [{ 'http-equiv': 'A-UA-Compatible', content: 'IE=Edge,chrome=1' }],
extraBabelPlugins: ['lodash'],
plugins: ['lodash-webpack-plugin'],
};

```

index.tsx

```

import { PivotSheet } from '@antv/s2';

fetch(
'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
)
.then((res) => res.json())
.then((dataCfg) => {
const container = document.getElementById('container');

const s2Options = {
width: 600,
height: 480,
hierarchyType: 'tree',
style: {
collapsedRows: {
'root[&]浙江省': true, // 折叠浙江省下面所有的城市
}
}
};
const s2 = new PivotSheet(container, dataCfg, s2Options);

s2.render();
});

const index = () => {
return (



);
};

export default index;
```

### 🔗 Reproduce Link

这是我的仓库地址:https://github.com/ink0101/s2-demo.git

### 🤔 Steps to Reproduce

在ie10、ie11浏览器中均可复现

### 😊 Expected Behavior

在chrome和ie中均可正常访问

### 😅 Current Behavior

### 💻 System information

| Environment | Info |
| ------- | ------- |
| System | windows11 |
| Browser | ie11 |

Contributor guide

Open the contributing guide

Research direction

Inspect the .umirc.ts and index.tsx files in the linked s2-demo reproduction, then check the IE10 and IE11 console error while rendering PivotSheet with @antv/s2 1.47.1. Done means the SVG icons render without the reported error in IE10 and IE11 while Chrome remains working.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.