Градиентная прозрачность объекта в 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); 
}); 

См. here for an example1 приведенного выше кода.

Так как я могу исправить это для IE? Обратите внимание, что я хочу поместить прямоугольники поверх изображения, чтобы он был прозрачным (а не белым).

Answer 1

Это не может быть исправлено. Это ограничение VML и Raphaël.

Однако вы можете уменьшить ширину прямоугольника, чтобы получить желаемый эффект. Чтобы получить полупрозрачный прямоугольник, вы должны применить .attr ({fill: "0- # 000- # 000", opacity: 0}); а затем сыграйте с шириной прямоугольника.