13.2 SVG投影效果（Drop Shadow）

SVG <feOffset>

SVG的投影效果和CSS3的drop-shadow属性类似。

实例代码1 - 简单投影

代码解释

• 上述代码定义了1个矩形（rect）元素和2个滤镜元素feOffset和feBlend
• rect元素通过id（为f1）链接到滤镜feOffset，表示将产生一个在x和y方向上偏移（20px，20px）的投影
• feBlend滤镜效果使得源元素覆盖在投影元素之上
• in="SourceGraphic" 表示效果应用于整个图形元素

实例代码2 - 模糊投影

代码解释

• 在例子1上通过feGaussianBlur滤镜添加了模糊效果，该模糊效果只应用在投影元素上。
• stdDeviation属性用来定义高斯模糊的程度。

实例代码3 - 暗影效果

代码解释

• <feOffset> 元素的in属性被修改为"SourceAlpha"，这将只把模糊效果使用在Alpha通道上，而不是整个RGBA像素。

实例代码3 - 颜色变换

代码解释

• <feColorMatrix> 过滤器用来把投影图片的RGB色值分别调整为原来的0.2倍，效果就是图片变暗接近黑色，如果把矩阵乘法的系数调整为0，就是black颜色=rbga（0,0,0,1)。