SVG 特殊效果

stroke属性

所有stroke属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。相关属性有：

• stroke：颜色
• stroke-width：线宽
• stroke-linecap：线两段的类型（butt无 / round圆 / square方） `
• stroke-dasharray：用于创建虚线（通过数字大小）

SVG滤镜

SVG滤镜被用来增加SVG图形的特殊效果。

语法：我们通过标签使用滤镜，注意id属性是必不可少的

可用的滤镜有：

• feBlend：与图像相结合的滤镜
• feColorMatrix：用于彩色滤光片转换
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset：过滤阴影
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight：用于照明过滤
• fePointLight：用于照明过滤
• feSpotLight：用于照明过滤

注意：可以在一个svg元素上同时使用多个滤镜
注意：IE和Safari不支持SVG滤镜！

模糊效果 feGaussianBlur实例

元素id属性定义一个滤镜
元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
元素的滤镜属性用来把元素链接到"f1"滤镜

阴影 feOffset + feBlend实例

feOffset + feBlend两个元素合作创建 "阴影" 效果。

• feOffset：负责定义位移
• feBlend：负责样式。

image.png

线性渐变

• y1==y2 且 x1!=x2：水平渐变
• x1==x2 且 y1!=y2：垂直渐变
• x1!=x2 且 y1!=y2： 角形渐变

放射性渐变

• cx，cy和r属性定义的最外层圆
• fx和fy定义的最内层圆
• 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个标签指定
• offset属性用来定义渐变色开始和结束

```