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过滤器

回答

相关问题