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

SVG 仕様のIE9サポートforeignObjectが不足していることはわかっています。

SVG カラー フィルターの W3C 指定テストを実行した後、matrixフィルター タイプのサポートも現時点では不足していることが公式に判明しました。

これは、 IE netrendererによって作成されたスナップショットで、上記のリンクされたテスト ページが 提供されています。IE9でのsvgフィルターマトリックステスト

CanIUse テストを実行して確認することもできます。

于 2012-05-11T17:26:49.417 に答える