Gradient transparency of object in RaphaelJS

Question

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.

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.

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).

Answer 1

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

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.