RaphaelJS中对象的渐变透明度答案

【问题标题】：Gradient transparency of object in RaphaelJSRaphaelJS中对象的渐变透明度
【发布时间】：2010-06-23 05:59:40
【问题描述】：

我正在尝试获得一个部分透明的矩形，其中左侧部分不透明，而右侧部分更透明，如果您进入该方向。

这适用于 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 example。

那么我该如何为 IE 解决这个问题呢？请注意，我想将矩形放在图像顶部，因此它必须是透明的（不是白色的）。

【问题讨论】：

标签： javascript svg raphael vml

【解决方案1】：

这无法修复。这是 VML 和 Raphaël 的限制。

但是，您可以减小矩形的宽度以获得所需的效果。要获得半透明矩形，您应该应用 .attr({fill: "0-#000-#000", opacity: 0});然后玩矩形的宽度。

【讨论】：

啊，谢谢你（......我不想听到的答案）。实际上，我通过创建矩形来简化问题，实际上我需要将它应用到不太对称的形式上（尽管我喜欢你解决它的想法）。