2

我有一些用 Raphael 库展示的图像。我选择 Raphael 库的首要原因是许多浏览器都支持它。我现在的问题是以黑白（灰度）表示图像。我已经设法在 Chrome、FF、Safari、IE 6.0+ 中以灰度显示它们。但由于某种原因，它在 IE 9.0 中不起作用。

我使用的代码如下：

<html>
<head>
<style type="text/css"> 
    #mainImg { 
        filter: url(filter.#grayscale); /* Firefox 3.5+ */ 
        filter: grayscale; /* IE5+ */ 
        -webkit-filter: grayscale(1); 
    } 
</style> 
</head>    

<body>
   <svg height="0" xmlns="http://www.w3.org/2000/svg"> 
       <filter id="grayscale"> 
            <feColorMatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> 
        </filter> 
   </svg>     

<div id="pItem"></div>


<script type="text/javascript">
 $(document).ready(function () {

 var paper= Raphael(document.getElementById("pItem"), 600, 400, "#c0c0c0");

 var pSet = paper.set();

 var c = paper.image("images/img1.png", 0, 0, 200 ,300);
     c.node.id = 'mainImg'; 

     c.node.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';


    });
</script>
</body>
</html>
4

1 回答 1

2

我们知道 IE9 缺乏对 SVG 规范的支持，因为没有涵盖诸如此类的功能foreignObject，从而使其无法完全符合标准。

在运行了W3C 指定的 SVG 滤色器测试后，官方表示matrix目前还缺乏对滤色器类型的支持。

这是IE netrenderer制作的快照，提供了上面链接的测试页面： 在 ie9 上的 svg 过滤器矩阵测试

也可以通过运行CanIUse 测试来查看。

于 2012-05-11T17:26:49.417 回答