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

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

4

1 回答 1

1

恐怕您根本无法通过 CSS 类为 VML 元素设置不透明度。例如，参见讨论这个差距的这个问题。

您需要使用 Raphael 的原生.attr({opacity: .5})或直接设置 VML 元素的opacity属性。一般来说，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);
于 2012-04-05T18:21:39.640 回答