svg滤镜, 更丰富的色彩魔法!!

来源：互联网发布：上瘾网络剧南京见面会编辑：程序博客网时间：2024/05/01 17:56

一直想了解SVG的滤镜使用, 无奈网上找不到高级的用法实例(如果有请留言分享), 只能自己动手了.╮(╯▽╰)╭
svg的滤镜非常复杂且强大, 一日突然的灵感发现有一个”奇技淫巧”可以轻松实现复杂的svg滤镜, 在此分享一下.

首先是基本的使用语法

在css中可以通过设置filter使用svg滤镜

filter: url(svg-url#element-id)

多个滤镜可以叠加

filter: <filter-function> [<filter-function>]* | none

css滤镜可以做到的svg滤镜同样可以做到

不同内核浏览器的滤镜实现略有不同,本文的图片效果以FF为准

高斯模糊滤镜

stdDeviation参数为模糊半径, 值越大越模糊

css实现

filter: blur(5px)

svg实现

<filter id="svgBlur">  <feGaussianBlur in="SourceGraphic" stdDeviation="5"/></filter>

原图 CSS3 SVG

亮度滤镜

方案1分别改变三个通道的值, 方案2利用了色彩矩阵

css实现

filter: brightness(0.2)

svg实现

<!-- 方案1 --><filter id="svgBrightness">  <feComponentTransfer>      <feFuncR type="linear" slope="0.2"/>      <feFuncG type="linear" slope="0.2"/>      <feFuncB type="linear" slope="0.2"/>  </feComponentTransfer></filter><!-- 方案2 --><filter id="svgBrightness2">    <feColorMatrix values="0.2 0   0   0 0                            0   0.2 0   0 0                            0   0   0.2 0 0                            0   0   0   1 0"/></filter>

原图 CSS3 SVG

对比度滤镜

对比度值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。
其中, 方案2的数字2 就是对比度值, 矩阵中的 -0.25 由[-(0.5 *2 ) + 0.5]/2求得

css实现

filter: contrast(200%)

svg实现

<!-- 方案1 --><filter id="contrast">    <feComponentTransfer>        <feFuncR type="linear" slope="2" intercept="-(0.5 * 2) + 0.5"/>        <feFuncG type="linear" slope="2" intercept="-(0.5 * 2) + 0.5"/>        <feFuncB type="linear" slope="2" intercept="-(0.5 * 2) + 0.5"/>    </feComponentTransfer></filter><!-- 方案2 --><filter id="contrast">    <feColorMatrix values="2 0 0 0 -0.25                            0 2 0 0 -0.25                            0 0 2 0 -0.25                            0 0 0 1  0"/></filter>

原图 CSS3 SVG

灰度滤镜

css实现

filter: grayscale(100%)

svg实现

<filter id="svgGrayscale">    <feColorMatrix values="0.299 0.587 0.134 0 0                            0.299 0.587 0.134 0 0                            0.299 0.587 0.134 0 0                            0     0     0     1 0"/></filter>

原图 CSS3 SVG

色相旋转滤镜

values参数为旋转角
css实现

filter:  hue-rotate(90deg)

svg实现

<filter id="svgHueRotate">    <feColorMatrix in="SourceGraphic" type="hueRotate" values="90" /></filter>

原图 CSS3 SVG

反色滤镜

css实现

filter: invert(100%)

svg实现

<filter id="svgInvert">    <feColorMatrix  values="-1 0 0 0 1                             0 -1 0 0 1                             0 0 -1 0 1                             0 0  0 1 0 " /></filter>

原图 CSS3 SVG

透明度滤镜

css实现

filter: opacity(50%)

svg实现

<!-- 方案2 --><filter id="svgOpacity">    <feColorMatrix values="1 0 0 0   0                            0 1 0 0   0                            0 0 1 0   0                            0 0 0 0.5 0 " /></filter><!-- 方案2 --><filter id="svgOpacity2">    <feComponentTransfer>        <feFuncA type="linear" slope="0.5" />    </feComponentTransfer></filter>

原图 CSS3 SVG

饱和度滤镜

values的值为0是完全不饱和，值为1则图像无变化。其他值，则是效果的线性乘子。超过1的值是允许的，则有更高的饱和度。
css实现

filter: saturate(400%)

svg实现

<filter id="svgSaturate">    <feColorMatrix in="SourceGraphic" type="saturate" values="4" /></filter>

原图 CSS3 SVG

css滤镜做不到的svg滤镜也可以做到

虽然svg滤镜也能实现css滤镜的效果, 但是用起来会复杂许多, 所以实现css滤镜无法实现的效果才是svg滤镜的强大之处.

黑光滤镜

svg实现

<filter id="blackLight">    <feColorMatrix type="luminanceToAlpha" result="result2" />    <feComposite in2="SourceGraphic" operator="arithmetic" in="result2" k3="2" result="result4" />    <feBlend in2="result2" in="result4" mode="multiply" result="result3" />    <feComposite in2="SourceGraphic" operator="in" in="result3" /></filter>

原图 SVG

曝光滤镜

svg实现

<filter id="overLight">    <feColorMatrix type="hueRotate" values="0" result="fbSourceGraphic" />    <feColorMatrix in="fbSourceGraphic" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 " result="result91" />    <feBlend in2="result91" mode="darken" in="fbSourceGraphic" result="result92" />    <feBlend in2="result92" mode="screen" result="result93" />    <feComposite in2="SourceGraphic" operator="in" /> </filter>

原图 SVG

柔和滤镜

svg实现

<filter id="soft">    <feColorMatrix type="saturate" values="1" result="result91" />    <feComposite in2="result91" result="result15" operator="arithmetic" k2="0.4" k1="0.3" k3="0.3" />    <feGaussianBlur in="result15" result="result8" stdDeviation="5" />    <feComposite in2="result8" operator="in" result="result13" />    <feComposite in2="result13" k3="0.3" k1="0.3" k2="0.4" operator="arithmetic" in="result15" result="result6" />    <feFlood flood-color="rgb(128,172,0)" flood-opacity="1" in="result6" result="result10" />    <feBlend in2="result10" result="result12" in="result6" mode="darken" />    <feBlend in2="result6" result="result14" mode="screen" />    <feComposite in2="SourceGraphic" in="result14" operator="in" result="result2" /></filter>

原图 SVG

软焦点滤镜

svg实现

<filter id="softFocus">    <feGaussianBlur stdDeviation="5" result="result3" />    <feComposite in2="result3" operator="arithmetic" in="result3" k1="0.5" k3="0.5" result="result1" />    <feBlend in2="result1" result="result5" mode="screen" in="SourceGraphic" />    <feBlend in2="result5" mode="darken" in="result5" result="result6" />    <feComposite in2="SourceGraphic" operator="in" /></filter>

原图 SVG

油画滤镜

svg实现

<filter id="oilPainting">    <feMorphology radius="2" in="SourceGraphic" result="result0" />    <feTurbulence numOctaves="1" baseFrequency="0.078" result="result91" />    <feDisplacementMap in2="result91" in="result0" scale="6.3" xChannelSelector="R" yChannelSelector="G" /></filter>

原图 SVG

浮雕滤镜

svg实现

<filter id="relief">    <feColorMatrix result="result2" type="luminanceToAlpha" />    <feDiffuseLighting diffuseConstant="0.6" result="result1" surfaceScale="-10">      <feDistantLight azimuth="225" elevation="35" />    </feDiffuseLighting>    <feComposite in2="SourceGraphic" result="result3" k3="0.5" k1="1.5" in="result1" operator="arithmetic" />    <feComposite in2="result3" result="result5" operator="in" in="result3" />    <feBlend in2="result1" result="result6" mode="normal" in="result5" />    <feComposite in2="result6" result="result7" operator="arithmetic" k2="1" />    <feComposite in2="SourceGraphic" in="result7" operator="in" /></filter>

原图 SVG

碎片滤镜

svg实现

<filter id="debris">    <feTurbulence baseFrequency="0.14299516908212559" numOctaves="1" type="fractalNoise" />    <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 6 -3.5 " result="result5" />    <feComposite in2="result5" operator="in" in="SourceGraphic" result="result6" />    <feMorphology result="result3" radius="5" operator="dilate" in="result6" />    <feDisplacementMap in2="result3" result="result4" scale="0" yChannelSelector="A" xChannelSelector="R" in="result3" />    <feComposite in2="result4" operator="arithmetic" result="result2" k1="1" k3="1" />    <feBlend in2="result2" mode="darken" in="result2" />    <feConvolveMatrix order="3 3" targetX="1" targetY="1" divisor="2" edgeMode="duplicate"       kernelMatrix="2 0 0 0 1 0 0 0 -1" /></filter>

原图 SVG

粗糙纸滤镜

svg实现

<filter id=" rawPaper">    <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" seed="0" result="result4" />    <feDisplacementMap in2="result4" in="SourceGraphic" yChannelSelector="G" xChannelSelector="R" scale="10" result="result3" />    <feDiffuseLighting lighting-color="rgb(233,230,215)" diffuseConstant="1" surfaceScale="2" result="result1" in="result4">        <feDistantLight azimuth="235" elevation="40" />    </feDiffuseLighting>    <feComposite in2="result1" operator="in" in="result3" result="result2" />    <feComposite in2="result1" result="result5" operator="arithmetic" k1="1.7" />    <feBlend in2="result3" in="result5" mode="normal" /></filter>

原图 SVG

撕裂边滤镜

svg实现

<filter id="tornEdge">    <feTurbulence baseFrequency="0.05" numOctaves="5" type="fractalNoise" result="result91" />    <feDisplacementMap in2="result91" scale="25" result="result5" xChannelSelector="R" in="SourceGraphic" />    <feComposite in2="result5" in="SourceGraphic" operator="atop" /></filter>

原图 SVG

锐化滤镜

svg实现

<filter id="sharpen">    <feConvolveMatrix order="3 3" divisor="1" in="SourceGraphic" targetX="1" targetY="1"    kernelMatrix="0 -0.15 0 -0.15 1.6 -0.15 0 -0.15 0"  /></filter>

原图 SVG

奇技淫巧

上面这些还远不是svg滤镜的极限, 但是svg滤镜的代码也实在是太反人类了, 就算是技术流恐怕也难以驾驭, 说好的”奇技淫巧”呢?别急, 看完下面就知道这一切so easy了.

其实上面的代码也不是我手写的, 全是来自inkscape(一个免费的svg编辑软件).
inkscape里面就有”滤镜”功能, 操作步骤如下:
1. 把图片拖入inkscape
2. 以所见即所得的方式编辑好效果
3. 导出为svg格式文件
4. 用sublime打开文件, 取出 <filter> 标签之间的内容即是滤镜代码.

是不是很简单呢?其实软件也不一定要是inkscape, 大名鼎鼎的AI等包含svg滤镜效果的编辑软件也可以. 用这种方法可以得到可视化的编辑, 使得我们可以更专注于效果而不是代码的细节.

总结

svg滤镜是比css更强大的web端滤镜解决方案, 利用工具也可以轻松实现滤镜效果, 而目前最大的问题就是浏览器兼容性(IE8是指望不上了, Edge也不行, chrome和FF还比较靠谱), 希望日后能够看到这种技术的应用.

0 0