CSS掩码的跨浏览器支持

Question

我想使用 CSS 来实现调色板渐变（ SVG 可用于跨浏览器兼容性）。在所有浏览器中使用CSS线性渐变并使用IE 9及更低版本的过滤器可以实现渐变。

要实现上述渐变，我必须使用遮罩。但是，如果不使用屏蔽可以实现这一点，请告诉我。

使用CSS中的线性渐变屏蔽在 Safari 和 Chrome 中正常工作，但 IE 和 Mozilla 中没有。

为了支持 Mozilla 中的屏蔽，我使用了SVG屏蔽元素，但它并没有针对所有尺寸进行缩放。我必须给出精确的视口尺寸（0,0,256,256），使其适用于尺寸的渐变（256 X 256）。我怎样才能实现各种尺寸的这一目标？或者我可以使用CSS实现这一点，就像在Chrome和Safari中一样？还是其他更好的方式？

我想在IE中实现相同，但IE中不支持这些方法中的任何一种。我想知道是否有更好的方法来处理这些问题。

以下是演示：https://jsfiddle.net/brindhaa10/tL1nx8uq/4/

 .picker{
            width:128px;
            height:128px;
            position: relative;
        }

.picker > *{
        position: absolute;
        width:100%;
        height:100%;
        top:0px;
}

.red1{
        background-image: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(magenta));
        background-image: -webkit-linear-gradient(left, red, magenta);
        background-image: -moz-linear-gradient(left, red, magenta);
        background-image: -o-linear-gradient(left, red, magenta);
        background-image: -ms-linear-gradient(left, red, magenta);
        background-image: linear-gradient(to right, red, magenta);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='red', endColorstr='magenta');/*For IE7-8-9*/
    }
    .red2{
        background-image: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(blue));
        background-image: -webkit-linear-gradient(left, black, blue);
        background-image: -moz-linear-gradient(left, black, blue);
        background-image: -o-linear-gradient(left, black, blue);
        background-image: -ms-linear-gradient(left, black, blue);
        background-image: linear-gradient(to right, black, blue);

        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='black', endColorstr='blue');/*For IE7-8-9*/    
         /* LINEAR GRADIENT - SUPPORTED ONLY IN CHROME AND SAFARI*/
        -webkit-mask-image: linear-gradient(rgba(255, 255, 255, 0) 0%, black 100%);
        mask-image: linear-gradient(rgba(255, 255, 255, 0) 0%, black 100%);
        -moz-mask-image: linear-gradient(rgba(255, 255, 255, 0) 0%, black 100%);

        /*SVG AS MASK --- SUPPORT FOR MOZILLA*/
        mask:url(#mask2);

    }

<svg width="0px" height="0px" viewport='0 0 128 128'>
<defs>
<mask id="mask2">
    <linearGradient id="maskGrad" x1="0" y1="1" x2="0" y2="0">
        <stop offset="0" stop-color="#ffffff"> </stop>
        <stop offset="1" stop-color="#000000"> </stop>
    </linearGradient>
    <rect width="100%" height="100%" fill="url(#maskGrad)"></rect>
</mask>
</defs>
</svg>
<div class='picker'>
   <div class='red1'></div>
   <div class='red2'></div>
</div>