文字渐变IE不兼容处理

问题：在做文字渐变类需求时，发现谷歌下可以完美实现的效果，在IE下却不是。

在谷歌下：

而在IE下：

 span{
        color: transparent;
        display: inline-block;
        font-size: 2em;
        font-family: '微软雅黑';
        background-image: -webkit-linear-gradient(right,red,blue);
        background-image: linear-gradient(to right,red,blue);
        -webkit-background-clip:text;
        -ms-background-clip:text;
        -o-background-clip:text; 
        -webkit-text-fill-color: transparent;
    }

一开始以为是兼容性前缀的问题，可是在给linear-gradient都加完前缀还是不行，查找css文档，发现原来是background-clip的问题，它的text属性在IE11下是不兼容的，所以我们只能采取另外的方法。

解决办法：通过SVG实现线性渐变，在IE下也可以完美实现效果。

    <svg>
        <defs>
            <linearGradient id="grad" x1="10%" y1="10%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:blue; stop-opacity:1" />
                <stop offset="30%" style="stop-color:#66aa66; stop-opacity:1" />
                <stop offset="60%" style="stop-color:orange; stop-opacity:1" />
                <stop offset="100%" style="stop-color:red; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x="0" y="36" fill="url(#grad)" style="font-size:36px">假如我有 八个字呢</text>
    </svg>

参考：