1

現在作業中の Web サイトで svg フィルターを使用しています。画像の彩度を下げるはずで、ホバーすると通常の色の状態に戻るはずです。私はオンライン チュートリアルを使用しましたが、Chrome、IE、Safari などでうまく機能します。私は解決策を探してみましたが、私が見つけた唯一の同様のケースは、間違った ID によるものでした。

私のsvgコード:

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

私のCSSコード:

#thumbnails li img
{
    width: 31%;
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
    margin-bottom: 1.3%;
    margin-top: 1.3%;
}

#thumbnails img:hover 
{
    filter: none;
    -webkit-filter: grayscale(0);
}

Firefox で表示されるコンソール エラーは次のとおりです。

「フィルター」の値の解析中にエラーが発生しました。宣言が取り下げられました

追加情報が必要な場合は、喜んで提供します。よろしくお願いします。ティモシー

4

1 に答える 1

0

将来の参考のために（これはかなり古い質問であり、OPがこれをもう必要としているかどうかはわかりません...）

.SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     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>

CSS:

.YOUR_DIV img {
    width: 260px;
    height: 190px;
     filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(PATH/TO/SVG/**filter**.svg#grayscale); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

.YOUR_DIV img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

*CSS 内のフィルターのパスと名前を、file.svg と ID に一致するように変更してください。

于 2013-02-16T12:11:32.697 に答える