Raphael div不透明度在IE上不起作用

问题描述

我正在尝试弄清楚如何使具有不透明性的矩形在IE上可用(FF/Chrome/Safari都可以).我尝试在CSS文件中创建一个类

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

但是，我在IE控制台中收到以下错误(它在FF上也不起作用):

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

此代码基于我之前对此> 提出的问题，但是由于无法获得建议的工作方法，我想知道是否还有其他事情做错了.我也曾在Raphael清单上询问过，但那里也没有建议的解决方案.

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.

推荐答案

恐怕您根本无法通过CSS类为VML元素设置不透明度.参见例如

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.

您将需要使用Raphael的本机.attr({opacity: .5})或直接设置VML元素的 opacity 属性.通常，Raphael API可以保护您免受这类不一致的影响，尽管令人沮丧的是您无法将样式规则分离到样式表中.

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

然后将它们设置为:

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

这篇关于Raphael div不透明度在IE上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！