2012-04-05 18 views
1

IE(FF/Chrome/Safariはすべて問題ありません)で動作する不透明度の四角形を作成する方法を解明しようとしています。それは(ただし、私はIEコンソールで次のエラーを取得するIE上でRaphael div不透明度が機能しない

 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') 

:私は

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

私のCSSファイル内のクラスを作成しようとしたし、次のコードを使用して矩形を作成しようとしましたFFのいずれか)上では動作しません:

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

私はこのpreviouslyに尋ねた質問から、このコードを基づかていますが、私は仕事に推奨される方法を得ることができないようTHER場合、私は思ったんだけどeは私が間違っている何か他のものです。私はラファエルのリストについても尋ねましたが、そこには解決策もありませんでした。

+0

代わりにノードの.classNameプロパティを設定するだけの場合はどうなりますか? –

+0

@Mityaどうすればいいですか? 'rIn.rect.node.className( 'opacity60')'だけでしょうか? – djq

+0

'rIn.rect.node.className( 'opacity60')'も動作しません.... – djq

答えて

1

CSSクラスを使用してVML要素の不透明度を設定することはできません。 this question where this gap is discussed.

あなたはラファエロの.attr({opacity: .5})ネイティブを使用するか、直接VML要素の不透明属性を設定する必要があります、例えば参照してください。一般的に、Raphael APIは、スタイル・ルールをスタイルシートに分けることができないという不満がありますが、この種の矛盾からあなたを守るためにあります。

rect.attr(RECT_STYLE); 
oval.attr(OVAL_STYLE); 
:その後、それらを好きな設定

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... 

を:あなたは視覚的なエンコーディングの間にいくつかの分離を維持するために行うことができます

一つのことは、あなたのコード内で指定されたエリア内のオブジェクトなど、すべてのスタイル情報を書き込むことです

関連する問題