我有一些在拉斐尔图书馆中展示的图像。我选择 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>
最佳答案
我们知道 IE9 缺乏对 SVG 规范的支持，如 features like foreignObject are not covered ，使其无法完全符合标准。
运行 W3C designated test for SVG color filter 后据官方消息，目前还缺乏对matrix过滤器类型的支持。
这是 IE netrenderer 制作的快照，输入上面链接的测试页面:
也可以通过运行 CanIUse test 来查看.
关于css - Raphael.js 的彩色图像到灰度图像在 I.E. 中不起作用9，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10533489/