IE 下文字渐变色

作者: iced_lemonade | 来源:发表于2020-11-18 09:22 被阅读0次

IE下不支持使用CSS的background-image或者mask属性实现的文字渐变色。

IE9 及以上可以使用SVG来实现文字渐变色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .text {
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svgdata" width="100%">
        <defs>
            <linearGradient id="grad" x1="0%" y1="0%" x2="0" y2="100%">
                <stop offset="0%" style="stop-color:blue;stop-opacity:1" />
                <stop offset="100%" style="stop-color:red;stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="44" fill="url(#grad)" class="text">IE9支持文字颜色渐变方法</text>
    </svg>
</body>
</html>

效果如下：