在Firefox中複製過濾器（色調旋轉）？（動態地）

我有具有這種「色調」類的圖像：在Firefox中複製過濾器（色調旋轉）？（動態地）

.hue { 
     -webkit-transition:all 1s ease-in-out; 
    transition:all 1s ease-in-out; 

    -webkit-filter: hue-rotate(0deg); 
    filter:hue-rotate(0deg); 
}

然後我改變該色相與jquery：

$('.hue').css({ 
     '-webkit-filter' : 'hue-rotate('+d+'deg)', 
     'filter'   : 'hue-rotate('+d+'deg)' 

});

其緩慢發生（因爲它應該在Chrome和Safari WebKit的）。我需要做些什麼才能在Firefox中實現這個功能？

據我所知，沒有-moz-filter或-moz-transition（source），色調旋轉應該在FF（source）中工作。

有幾乎相同的問題問here，但答案不適合我，因爲像PaintbrushJS庫有預定義的過濾器，而我需要自己設置色相值。

任何幫助或解決方法，在FF中完成此高度讚賞！

編輯：Pixastic似乎允許設置自定義值，但我不能在應用過渡或見效慢......這是現在最後一個問題:)

EDIT2我設法設置色相在FF的幫助下（相當醜陋）。如果在下一行添加到您的CSS（旁邊-webkit-過濾器適用於Chrome和Safari）：

filter:url(file.svg#myFilter)

，並創建file.svg：

<?xml version="1.0"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg xmlns="http://www.w3.org/2000/svg"> 
<defs> 
    <filter id="myFilter"> 
    <feColorMatrix type="hueRotate" values="140"/> 
    </filter> 
    <filter id="myFilter2"> 
    <feColorMatrix type="hueRotate" values="50"/> 
    </filter> 
</defs> 
</svg>

這個工程。總之它試圖動態地改變它像這樣的時候失敗：

$('.hue').css({ 
    '-webkit-filter' : 'hue-rotate('+d+'deg)', /* this works */ 
    'filter'   : 'url(filters.svg#'+myFilterName+')' /* this doesnt */ 
});

（我可以看到發生在元素上的變化，但頁面只是去白）

來源

2014-05-15 trainoasis

這是沒有支持實驗技術在FF中至今。請從您提供的鏈接的相同頁面查看compatibility table。

我建議用PaintbrushJS或Pixstatic打開一個關於你提到的改進的建議（Pixstatic似乎不是開源的，所以你必須通過電子郵件聯繫他們）。

甚至可能自己實現一個新的過濾器到PaintbrushJS併發出拉請求！

來源

2014-05-16 00:36:36 climbinghobo

實際上，當通過FF支持查看時，我看到它支持'link（url to svg filter）'。 [在這裏解釋]（http://www.vanseodesign.com/css/filter-primitives/），儘管我認爲你的最佳行動方式是svg照片上的svg過濾器（也在同一頁面中解釋過）。 – climbinghobo

在我回來檢查答案之前，我碰到了filter：url（file.svg＃filter），它似乎在FF中完成這項工作。但不幸的是，改變它與jQuery不起作用。 – trainoasis

在Firefox中複製過濾器（色調旋轉）？ （動態地）

回答

相關問題

在Firefox中複製過濾器（色調旋轉）？（動態地）