1

IEで機能する不透明度のある長方形を作成する方法を見つけようとしています（FF / Chrome / Safariはすべて問題ありません）。CSSファイルにクラスを作成してみました

.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

私は以前にこれについて尋ねた質問に基づいてこのコードを作成していますが、提案されたアプローチが機能しないため、他に間違っていることがあるかどうか疑問に思っています。私はラファエルのリストにも質問しましたが、そこにも提案された解決策はありません。

4

1 に答える 1

1

CSSクラスを介してVML要素の不透明度を設定することはできません。たとえば、このギャップが説明されているこの質問を参照してください。

Raphaelのネイティブを使用する.attr({opacity: .5})か、VML要素の不透明度属性を直接設定する必要があります。一般に、Raphael APIは、この種の不整合からユーザーを保護するためにありますが、スタイルルールをスタイルシートに分離できないことは苛立たしいことです。

ビジュアルエンコーディングをある程度分離するためにできることの1つは、コード内の指定された領域にすべてのスタイル情報をオブジェクトとして書き込むことです。

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);
于 2012-04-05T18:21:39.640 に答える