Raphael div Opazität funktioniert nicht auf IE

Question

Ich versuche herauszufinden, wie Rechtecke mit Opazitäten, die auf IE arbeiten (FF/Chrome/Safari sind alle in Ordnung) machen. Ich habe eine Klasse in meiner CSS-Datei versucht, die Schaffung

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

und dann versuchte, ein Rechteck mit dem folgenden Code zu erstellen:

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

Allerdings bekomme ich folgende Fehler in der IE-Konsole (es nicht entweder auf FF arbeiten):

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

ich von der Frage, diesen Code bin gestützt habe, dass ich auf diesen previously gefragt, aber da ich nicht den vorgeschlagenen Ansatz bekommen arbeitet ich mich, wenn ther Es ist etwas anderes, was ich falsch mache. Ich habe auch auf der Raphael-Liste gefragt, aber es gab auch keine Lösungsvorschläge.

Answer 1

Ich fürchte, Sie können einfach nicht Opazität für VML-Elemente über CSS-Klassen festlegen. Siehe zum Beispiel this question where this gap is discussed.

Sie werden Raffaels nativer .attr({opacity: .5}) verwenden müssen oder setzen Sie das direkt Opazität Attribut der VML-Elements. Im Allgemeinen ist die Raphael API da, um Sie vor diesen Inkonsistenzen zu schützen, obwohl es frustrierend ist, dass Sie Ihre Stilregeln nicht in ein Stylesheet aufteilen können.

Eine Sache, die Sie tun können gewisse Trennung zwischen visuellen Codierungen zu halten ist, alle Informationen für Ihren Stil als Objekte in einem bestimmten Bereich in Ihrem Code zu schreiben:

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

Dann setzen sie mögen:

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