Question

我有一些我用拉斐尔图书馆展示的图像。我选择Raphael库的首要原因是因为许多浏览器都支持它。我现在的问题是用黑白（灰度）表示图像。我已经设法在Chrome，FF，Safari，I.E 6.0+中以灰度显示它们。但由于某种原因，它不适用于I.E 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>

Answer 1

我们知道缺少IE9对SVG规范的支持，因为features like foreignObject are not covered阻止了它完全符合标准。

运行W3C designated test for SVG color filter之后，目前还缺少对matrix过滤器类型的支持。

这是由IE netrenderer创建的快照，由以上链接的测试页提供： svg filter matrix test on ie9

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

使用Raphael.js在I.E.中工作的彩色图像到灰度图像9

1 个答案: