2010-06-23 127 views
1

我試圖讓一個矩形部分透明,其中左側部分是不透明的,而右側部分是更透明的,如果你進入該方向。RaphaelJS中對象的漸變透明度

這適用於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?請注意,我想將矩形放在圖像頂部,因此它必須是透明的(而不是白色)。

回答

9

這不能修復。這是VML和Raphaël的限制。

但是,您可以減小矩形的寬度以獲得所需的效果。要獲得半透明矩形,您應該應用.attr({fill:「0-#000-#000」,opacity:0});然後用矩形的寬度播放。

+0

啊,謝謝(...我不想聽到的答案)。其實我通過創建矩形來簡化問題,實際上我需要將它應用於不太對稱的形式(儘管我喜歡解決它的想法)。 – Roalt 2010-06-23 18:48:07