2012-04-05 72 views
1

我想弄清楚如何使工作在IE(FF /鉻/ Safari都很好)的不透明矩形。我在我的CSS文件Raphael div不透明度不工作在IE

.opacity60 { 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
filter: alpha(opacity=60); 
} 

嘗試創建一個類,然後嘗試使用下面的代碼來創建一個矩形:

 var rIn = Raphael("sideIn", "100%", "100%"); 
     rIn.rect(0, 0, "100%", "100%").attr({fill:"black", stroke:"none", 
opacity:0.6 }); 
     rIn.rect.node.setAttribute('class', 'opacity60') 

不過,我得到的IE控制檯下面的錯誤(它在FF不工作要麼):

SCRIPT5007: Unable to get value of the property 'setAttribute': object 
is null or undefined 

我從基礎,我問這個previously問題的代碼,但我不能得到建議的方法來工作,我想知道如果療法e是我做錯的其他事情。我也在拉斐爾名單上提出過要求,但在那裏也沒有提出解決方案。

+0

如果您只是設置節點的.className屬性,會發生什麼情況? – 2012-04-05 15:54:30

+0

@Mitya我該怎麼做?它只是'rIn.rect.node.className('opacity60')'? – djq 2012-04-05 16:23:19

+0

'rIn.rect.node.className('opacity60')'也不起作用.... – djq 2012-04-05 16:36:04

回答

1

恐怕你根本無法通過CSS類設置VML元素的不透明度。例如,見this question where this gap is discussed.

你需要用拉斐爾的原生.attr({opacity: .5})或直接設置VML元素的透明度屬性。一般來說,Raphael API可以幫助您避免這些不一致之處,儘管您無法將您的樣式規則分離到樣式表中,這令人沮喪。

有一兩件事可以做,以保持視覺編碼之間的一些分離是寫你的所有樣式信息爲對象在代碼中的指定區域:

var RECT_STYLE = { 
    opacity: .5, 
    fill: "#ff0000", 
    stroke: "#333333", 
    stroke-width: 1 
} 

var OVAL_STYLE = { 
    opacity: .9, 
    fill: "#ffFF00", 
    stroke: "#000000", 
    stroke-width: 5 
} 
//etc... 

然後將它們喜歡:

rect.attr(RECT_STYLE); 
oval.attr(OVAL_STYLE);