为什么字体上的剪辑路径、透视和线性渐变在 IE11 / Edge 上不起作用答案

【问题标题】：Why Clip-path, perspective & linear-gradient on font not works on IE11 / Edge为什么字体上的剪辑路径、透视和线性渐变在 IE11 / Edge 上不起作用
【发布时间】：2017-12-05 06:09:02
【问题描述】：

我正在尝试在字体上制作一些多边形、旋转动画效果和渐变。 Chrome 和 Firefox 运行良好，但 Internet Explorer 11 无法正常运行。我正在研究SASS。我做了一些研究，尝试了一些例子，但没有一个奏效。我在 IE/11 上遇到了某些问题。

预期属性（包括前缀 /
不工作）
剪辑路径：多边形不起作用

线性渐变不适用于字体

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

这是我的代码JSFiddle

在我的研究中，它说某些属性可以在 IE10+ 上运行，但我在 IE11 上遇到问题。有没有其他方法可以处理这些属性。

【问题讨论】：

perspective 应该可以工作，clip-path 仅在 svg 元素上受支持（并且使用 url() 语法），并且 background-clip 自 Edge 12 起才受支持。
透视根本不工作，有没有其他方法可以使用背景剪辑。

标签： html css sass

【解决方案1】：

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

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

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

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

【讨论】：

似乎在 SVG 上工作而不是使用剪辑路径多边形是 IE9+ 的更好选择，关心你的观点
公平点。我编辑了评论以包含您的建议，尽管我仍然会认为这是一个图像替换。