I'm trying to figure out how to make rectangles with opacities that work on IE (FF/Chrome/Safari are all fine). I've tried creating a class in my CSS file

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

and then tried to create a rectangle using the following code:

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

However, I get the following error in the IE console (it does not work on FF either):

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

I am basing this code from the question that I asked on this previously, but as I can't get the suggested approach to work I'm wondering if there is something else that I am doing wrong. I've also asked on the Raphael list but there have been no suggested solutions there either.

• javascript
• internet-explorer
• raphael
• opacity

I'm afraid you simply can't set opacity for VML elements via CSS classes. See for example, this question where this gap is discussed.

You'll need to use Raphael's native .attr({opacity: .5}) or set the VML element's opacity attribute directly. In general, the Raphael API is there to shield you from these kind of inconsistencies, though it is frustrating that you can't separate your style rules out to a stylesheet.

One thing you can do to keep some separation between visual encodings is to write all your style information as objects in a designated area in your code:

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

Then set them like:

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