🐛 兼容性问题:svg icon 在ie浏览器中不展示
- 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可以正常展示,如下图所示:


### ⌨️ 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
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