Градиентная прозрачность объекта в RaphaelJS - PullRequest
Новая
       29

Градиентная прозрачность объекта в RaphaelJS

1 голос
/ 23 июня 2010

Я пытаюсь получить частично прозрачный прямоугольник, где левая часть непрозрачна, а правая часть более прозрачна, если вы идете в этом направлении.

Это работает в 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);
});

См. здесь для примера приведенного выше кода.

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

1 Ответ

9 голосов
/ 23 июня 2010

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

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

...