为什么字体上的剪辑路径,透视和线性渐变不适用于IE11/Edge

Question

我正在尝试制作一些多边形,旋转动画效果和字体上的渐变.Chrome和Firefox工作正常,但Internet Explorer 11无法正常工作.我在SASS工作.我已经做了一些研究尝试了一些例子,但非有效.我在IE/11上遇到了一些问题.

• 预期财产(包括前缀/
  不工作)

• clip-path:polygon不工作

• 线性渐变不适用于字体

  display: inline-block;
  background-image: linear-gradient(to right top, #bd74c2, #69306D);
  -webkit-background-clip: text;
  -ms-background-clip: text;
  

这是我的代码JSFiddle

在我的研究中,它说这个属性的一些将适用于IE10 +但我在IE11上有问题.有没有其他方法来处理这些属性.

Answer 1

IE11 上的问题是-ms-background-clip: text不起作用。更多信息可以在 caniuse 网站上找到：

Firefox、Chrome 和 Safari 支持非官方 -webkit-background-clip: 文本（仅带前缀）

参考： https: //caniuse.com/#search=background-clip

您在 IE11 上的选择是让您的字体回退到纯色（优雅降级），按照DayOne建议使用 svg 代替，或者在该浏览器上用图像替换文本（严重老派）