Angular 8中SVG圆形动画在IE11失效的解决方法咨询

我来帮你搞定这个IE11兼容的问题，咱们从CSS修改、Angular配置两个方面入手，一步步解决：

一、修改CSS适配IE11 #

IE11对SVG的CSS支持有几个特定的坑，咱们针对性调整：

修改后的CSS代码 #

#countdown { 
  position: relative; 
  margin: auto; 
  height: 40px; 
  width: 40px; 
  text-align: center; 
}
#countdown-number { 
  color: #1C5BA2; 
  display: inline-block; 
  line-height: 40px; 
}
svg { 
  position: absolute; 
  top: 0; 
  right: 0; 
  width: 40px; 
  height: 40px; 
  /* IE11不支持3D变换，用scaleX(-1)模拟rotateY(-180deg)的水平翻转效果 */
  -ms-transform: scaleX(-1) rotate(-90deg);
  /* 现代浏览器保留原3D变换 */
  transform: rotateY(-180deg) rotateZ(-90deg); 
}
svg circle { 
  /* IE11不识别SVG stroke属性的px单位，改用纯数值 */
  stroke-dasharray: 113; 
  stroke-dashoffset: 0; 
  stroke-linecap: round; 
  stroke-width: 2px; 
  stroke: #1C5BA2; 
  fill: none; 
  /* 添加多浏览器前缀，确保IE11识别动画 */
  -webkit-animation: countdown 31s linear forwards;
  -ms-animation: countdown 31s linear forwards;
  animation: countdown 31s linear forwards; 
}
/* 标准关键帧 */
@keyframes countdown { 
  from { stroke-dashoffset: 0; } 
  to { stroke-dashoffset: 113; } 
}
/* IE11专属的-ms前缀关键帧 */
@-ms-keyframes countdown { 
  from { stroke-dashoffset: 0; } 
  to { stroke-dashoffset: 113; } 
}

CSS修改的关键原因 #

1. 替换3D变换：IE11不支持rotateY这类3D变换，用scaleX(-1)模拟水平翻转，搭配rotate(-90deg)可以达到和原效果一致的视觉表现。
2. 去掉px单位：IE11对SVG的stroke-dasharray、stroke-dashoffset属性不识别带px的单位，必须使用纯数值才能正常解析。
3. 添加-ms前缀：IE11需要-ms-前缀才能识别CSS关键帧动画和transform属性，否则会忽略相关规则。

二、配置Angular项目的IE11兼容 #

Angular 8默认没有完全开启IE11支持，需要补充polyfill和配置：

1. 补充Polyfill #

打开项目根目录的src/polyfills.ts，确保添加以下内容（如果没有的话）：

// IE11必需的core-js基础polyfill
import 'core-js/es6/array';
import 'core-js/es6/date';
import 'core-js/es6/function';
import 'core-js/es6/map';
import 'core-js/es6/number';
import 'core-js/es6/object';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/regexp';
import 'core-js/es6/set';
import 'core-js/es6/string';
import 'core-js/es6/symbol';
import 'core-js/es6/weak-map';
import 'core-js/es7/array';

// 为IE11提供SVG动画支持的polyfill
import 'web-animations-js';

执行npm install web-animations-js --save安装这个依赖。

2. 配置Browserslist #

修改项目根目录的.browserslistrc文件，添加IE11支持：

IE 11
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions
last 2 Edge versions

或者在angular.json的projects -> [你的项目名] -> architect -> build -> options中添加：

"browserslist": [
  "IE 11",
  "last 2 versions of Chrome, Firefox, Safari, Edge"
]

3. 验证编译 #

执行ng build --prod重新编译项目，部署后IE11就能正常显示动画了。

内容的提问来源于stack exchange，提问作者Tzimpo