SVG滤镜的强大有目共睹，不仅可以达到PS级别的图像处理效果，甚至可以通过添加动画达到前所未有的强交互效果，令人赞叹：一篇SVG滤镜交互的按钮demo。
通过css自带的 filter:url(<url>) 用法即可，以下是例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ -webkit-filter:url("#filter1"); filter: url("/#filter1"); } </style> </head> <body> <svg width="0" height="0" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="filter1"> <feColorMatrix type="hueRotate" values="90"></feColorMatrix> <feGaussianBlur stdDeviation="3" result="Gau1"/> <feComposite in="Gau1" in2="SourceGraphic" result="Com1" operator="in"/> <feComposite in="Com1" in2="Gau1" operator="atop"/> </filter> </svg> <div> <img src="http://youdaocloud.oss-cn-shanghai.aliyuncs.com/202279.jpg" /> </div> </body> </html>效果比较
无滤镜原图添加滤镜