vml元素设置css opacity样式导致的图像锯齿问题

使用vml创建图形时，因为图形下还有一张底图，所以需要将vml创建的图形设置一定的透明度，以便可以看见下面的底图。

开始时，使用了ie的滤镜透明filter:alpha(opacity=xxx)来设置图形的透明度，结果在ie下出现了描边锯齿。

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
    .shape {
        opacity: 0.5;
        filter: alpha(opacity=50)
    }
</style>

<v:shape class="shape" path="xxx">
    <v:fill color="red"></v:fill>
    <v:stroke color="red"></v:stroke>
</v:shape>

起初还以为是vml的数字精度问题导致的，后来排查了大半天才发现是使用了滤镜透明导致的。

改成vml元素的opacity属性才干掉了锯齿：

1
2
3
4
<v:shape class="shape" path="xxx">
    <v:fill color="red" opacity="0.5"></v:fill>
    <v:stroke color="red" opacity="0.5"></v:stroke>
</v:shape>