2012-05-10 193 views
2

我有一些與Raphael圖庫一起顯示的圖像。我選擇Raphael庫的首要原因是因爲它在許多瀏覽器中都受支持。我現在的問題是用黑白(灰度)表示圖像。我已經設法在Chrome,FF,Safari,I.E 6.0+中以灰度顯示它們。但由於某種原因,它不適用於I.E 9.0。彩色圖像與Raphael.js灰度圖像不工作在I.E. 9

我使用的代碼如下:

<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> 
+0

是過濾器中的''.''灰度是一個錯字,還是從文檔中嵌入的SVG派生的語法? –

+0

另一個:嘗試'過濾器:灰色;'而不是'過濾器:灰度;'爲IE5 +,只是爲了縮小可能的問題。 –

+0

這是從文檔中嵌入的SVG派生而來的語法。 –

回答