0

誰かにとって興味深い質問. 次のマークアップを使用して、ページに読み込まれた画像に SVG フィルターを適用しようとしています。

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <style type="text/css">
  #exampleImage { 
    filter: url("#grayscale");
  }
  </style>
</head>
<body>
  <img id="exampleImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/300px-Bitmap_VS_SVG.svg.png" />
  <svg xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
      <feColorMatrix type="matrix" 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>
</body>
</html>

これは Firefox では問題なく動作します - 画像はグレースケールで表示されますが、Webkit (Mac の Chrome または Safari) では動作しません。私が読んできたものから、これはうまくいくはずです。私が見逃しているものを見ることができますか？

ありがとう！

  • ベン
4

2 に答える 2

2

svg フィルターをサポートするすべてのブラウザーで機能するように作成された例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <style type="text/css">
  #exampleImage { 
    filter: url("#grayscale");
  }
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale" x="0" y="0" width="1" height="1">
      <feColorMatrix type="matrix" 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>
    <image id="exampleImage" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/300px-Bitmap_VS_SVG.svg.png" width="100%" height="100%"/>
  </svg>
</body>
</html>

Safari はバージョン 6 でフィルターのサポートを開始しました。すべてのブラウザーのサポートの表を参照してください。

于 2012-12-04T11:01:21.733 に答える
0

気にしないでください、filter: url() 構文は、私が他の場所で読んだことにもかかわらず、webkit に適していないことがわかりました。

代わりに、この特定のシナリオでは、CSS ルールを使用する必要があります。

-webkit-filter: グレースケール (100%);

于 2012-12-04T02:34:39.143 に答える