gradient color fill with opacity in raphael - raphael

Question

I'm having trouble keeping the same level of opacity on an element with a gradient filled color
var paper = Raphael(0, 0, 300, 300);
paper.path(["M", 20, 20, "h", 200, "v", 200, "h", -200, "z"]).attr({
"stroke-width": 3,
stroke: 'red',
"opacity": 0.5,
fill: "90-red-red"
});
http://jsfiddle.net/zhirkovski/vvAaz/1/
as you can see the gradient starts off at 0.5, but increases to 1 by the time it reaches the second color, why? Even if you change the colors, one of them renders at opacity = 1, is this a bug? if so is there a work-around, or is it something i'm doing wrong?

Answer 1

From my own investigation this looks like a limitation of VML and subsequently Raphael. You can find more information via the following bug report: https://github.com/DmitryBaranovskiy/raphael/issues/211
It really limits what you can do with gradients and fades which is a bane for all of us. The best way to do this would be with jQuery:
// Setting up defaults
var paper = Raphael("canvas", 200, 200);
var bgBottom = paper.rect(0, 0, 200, 200).attr({fill: "90-#999-#fff"});
var bgTop = paper.rect(0, 0, 200, 200).attr({fill: "90-#999-#fff"});
// New gradient to fade to
bgBottom.attr({fill: "90-#069-#000"});
$(bgTop.node).animate({opacity: 0}, 1000);
You can then animate the top in and out with fill changes:
bgTop.attr({fill: "90-#f0f-#fff"});
$(bgTop.node).animate({opacity: 1}, 1000);
Here's my jsfiddle to help demonstrate: http://jsfiddle.net/spQsf/
Hope this helps!