Dégradé de transparence de l'objet dans RaphaelJS

Question

J'essaie d'obtenir un rectangle partiellement transparent où la partie gauche est opaque alors que la partie droite est plus transparente si vous allez dans cette direction.

Cela fonctionne dans Firefox, Chrome mais pas dans Internet Explorer 7 ou IE8. Dans IE, tous les rectangles sont affichés avec le même dégradé transparent.

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

Voir here for an example du code ci-dessus en cours d'exécution.

Alors, comment puis-je résoudre ce problème pour IE? Notez que je veux placer les rectangles au-dessus d'une image afin qu'elle soit transparente (pas blanche).

Answer 1

Ceci ne peut pas être réparé. C'est une limitation de VML et Raphaël. Cependant, vous pouvez réduire la largeur du rectangle pour obtenir l'effet désiré. Pour obtenir un rectangle semi-transparent, vous devez appliquer .attr ({fill: "0- # 000- # 000", opacity: 0}); puis jouez avec une largeur du rectangle.