RaphaelJS中对象的渐变透明度

问题描述

我正在尝试获得一个局部透明的矩形，如果您朝该方向移动，则左侧部分是不透明的，而右侧部分则更加透明.

I'm trying to get a rectangle partly transparent where the left part is opaque while the right part is more transparent if you go into that direction.

这在Firefox，Chrome中有效，但在Internet Explorer 7或IE8中无效.在IE中，所有矩形均以相同的透明渐变显示.

This works in Firefox, Chrome but not in Internet Explorer 7 or IE8. In IE all rectangles are displayed with the same transparent gradient.

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);
});

有关上述代码运行的示例，请参见此处.

See here for an example of above code running.

那么我该如何为IE修复此问题?请注意，我想将矩形放在图像的顶部，因此它必须是透明的(而不是白色).

So how can I fix this for IE? Note that I want to put the rectangles on top of an image so it must be transparent (not white).

推荐答案

此问题无法解决.这是VML和Raphaël的局限性.

This can’t be fixed. It is a limitation of VML and Raphaël.

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

However you can reduce width of the rectangle to get desired effect. To get semitransparent rect you should apply .attr({fill: "0-#000-#000", opacity: 0}); and then play with a width of the rectangle.

这篇关于RaphaelJS中对象的渐变透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！