RaphaelJS中对象的渐变透明度

Question

我试图得到一个部分透明的矩形,其中左边部分是不透明的,而右边的部分则更加透明,如果你进入那个方向.

这适用于Firefox,Chrome,但不适用于Internet Explorer 7或IE8.在IE中,所有矩形都以相同的透明渐变显示.

function drawTest(y, pct) {
    var recttest = paper.rect(25,y,100,30);
    var gradstr = "0.0-#db38cc:5-#db38cc:"+pct;
    recttest.attr({"fill": gradstr,"opacity": "0.01"});
}
$(document).ready(function() {
        paper = Raphael(10,100, 400, 400);
        drawTest(0, 30);
        drawTest(50, 40);
        drawTest(100, 50);
        drawTest(150, 60);
        drawTest(200, 70);
        drawTest(250, 80);
});

请参阅此处以获取上述代码运行的示例.

那我怎么能为IE解决这个问题呢？请注意,我想将矩形放在图像的顶部,因此它必须是透明的(不是白色).

Answer 1

这无法修复.这是VML和Raphaël的限制.

但是,您可以减小矩形的宽度以获得所需的效果.要获得半透明矩形,你应该应用.attr({fill:"0-#000-#000",不透明度:0}); 然后播放矩形的宽度.