Question

我正在试图弄清楚如何制作可在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

我根据我在previously上提出的问题编写此代码，但由于我无法获得建议的工作方法，我想知道是否还有其他问题我做错了。我也曾在Raphael列表上询问过，但也没有建议的解决方案。

Answer 1

我担心你根本无法通过CSS类为VML元素设置不透明度。例如，请参阅this question where this gap is discussed.

您需要使用Raphael的原生.attr({opacity: .5})或直接设置VML元素的不透明度属性。一般来说，Raphael API可以保护您免受这些不一致的影响，尽管令人沮丧的是您无法将样式规则与样式表分开。

在视觉编码之间保持一定距离的一件事是将所有样式信息作为对象写入代码中的指定区域：

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

1 个答案: