Chrome中的不同的SVG過濾器

我試圖將svg過濾器應用於圖像。該過濾器是一個黃色到灰色的梯度圖。這對Firefox和Safari很有用，但在Chrome中，過濾器在顏色不同的情況下有一個奇怪的結果。Chrome中的不同的SVG過濾器

我做了這裏提琴：http://jsfiddle.net/thomasjonas/a3pu9uo9/2/

代碼過濾

<svg version="1.1" width="0" height="0"><filter id="filter"><feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="1 0.8"></feFuncR><feFuncG type="table" tableValues="0.9294117647058824 0.8"></feFuncG><feFuncB type="table" tableValues="0 0.8"></feFuncB><feFuncA type="table" tableValues="1 1"></feFuncA></feComponentTransfer></filter></svg>

CSS

img { 
    -webkit-filter: url(#filter); 
    filter: url(#filter); 
}

來源

2014-10-01 thomasjonas

此舉「彩色插值濾波器= '的sRGB' 到你的濾芯並且你會得到一個一致的結果，Firefox/Safari或者Chrome似乎在整個過濾器中使用sRGB（儘管它只是針對feComponentTransfer聲明的）。不知道哪一個做錯了。

來源

2014-10-02 00:38:04

feComponentTransfer是什麼導致黃色。我不確定爲什麼瀏覽器之間的效果不同？在我的系統上，Firefox的版本也是黃色的。

<feComponentTransfer color-interpolation-filters="sRGB"> 
    <feFuncR type="table" tableValues="1 0.8"></feFuncR> 
    <feFuncG type="table" tableValues="0.9294117647058824 0.8"></feFuncG> 
    <feFuncB type="table" tableValues="0 0.8"></feFuncB> 
    <feFuncA type="table" tableValues="1 1"></feFuncA> 
</feComponentTransfer>

我不確定你試圖用fecomponentTransfer創建什麼樣的效果。但它將它放在創建灰色屏幕的feColorMatrix之前，您將獲得feComponentTransfer的灰色輸出。

更改feComponent的值稍微（在灰色之後），給出舊的泛黃，黑白照片的效果。顏色R和G產生的變黃變得稍微高一點，而藍色則不變。由於黑色隨着時間推移而逐漸消失，因此RGB顏色全部最大爲80％的黑度。

<img src="http://lust.nl/media/image/large/A0_madurodam60.jpg"/> 

<svg version="1.1" width="0" height="0"><filter id="filter"> 

    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix> 
     <feComponentTransfer color-interpolation-filters="sRGB"> 
     <feFuncR type="table" tableValues="0.09294117647058824 0.8"></feFuncR> 
     <feFuncG type="table" tableValues="0.09294117647058824 0.8"></feFuncG> 
     <feFuncB type="table" tableValues="0 0.8"></feFuncB> 
     <feFuncA type="table" tableValues="0 1"></feFuncA> 
    </feComponentTransfer> 
    </filter> 
</svg>

實際上白色移動的R和G一直變爲1，藍色變爲0.7。我喜歡最好的結果。

<feComponentTransfer color-interpolation-filters="sRGB"> 
    <feFuncR type="table" tableValues=".091 1"></feFuncR> 
    <feFuncG type="table" tableValues="0.09294117647058824 1"></feFuncG> 
    <feFuncB type="table" tableValues="0 0.7"></feFuncB> 
    <feFuncA type="table" tableValues="1 1"></feFuncA> 
</feComponentTransfer></filter></svg>

只是一黃灰色過濾所有你需要的是feColorMatrix

<filter id="colorMatrix"> 
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 .7 0, 0.2126 0.7152 0.0722 .6 0, 0 0 0 0 0, 0 0 0 1 0"/> 
</filter>

來源

2014-10-02 03:04:50 Wayne

Chrome中的不同的SVG過濾器

回答

相關問題