1.模糊和阴影效果
<feGaussianBlur stdDeviation="15" />:前者是属性,后者是定义高斯模糊的数量,id号需要和图形的filter属性的值相同
案例:
源代码:
<svg width="110" height="110">
<defs>
<filter x="0" y="0" id="f1">
<feGaussianBlur stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" strkoe-width="3" fill="yellow" filter="url(#f1)"/>
</svg>
2.阴影效果
dx,dy:分别表示在x方向和y方向的偏移量
<feOffset in="SourceAlpha" dx="20" dy="20" />:in代表的是阴影要填充的颜色
<feBlend in="SourceGraphic" />:代表的是阴影与原来的图像进行混合图像
案例:
源代码:
<svg width="140" height="140">
<defs>
<filter dx="0" dy="0" width="200" height="200" id="f2">
<feOffset in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" strkoe-width="3" fill="yellow" filter="url(#f2)"/>
</svg>
3.线性渐变
水平渐变,垂直渐变,角度渐变:
x1,y1 x2,y2:定义线性渐变的开始位置和结束位置,x与y值的不相同,将会产生上述三种不同的渐变:
渐变的颜色用stop标签,offset属性,表示开始和结束的位置,offset属性的值是一个描述相对位置的百分比,stop-color为渐变的颜色。
案例1(水平渐变):
源代码:
<svg width="400" height="150">
<defs>
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="grad1">
<stop offset="0%" stop-color="rgb(255,255,0)"/>
<stop offset="100%" stop-color="rgb(255,0,0)"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<br>
案例2(垂直渐变):
源代码:
<svg width="400" height="150">
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="grad2">
<stop offset="0%" stop-color="rgb(255,255,0)"/>
<stop offset="100%" stop-color="rgb(255,0,0)"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
<text fill="#ffffff" font-size="45" x="150" y="86">SVG</text>
</svg>
4.径向渐变
cx,cy:定义了最外面的圆,fx,fy定义了最里面的圆,径向渐变的颜色范围可以由两种或者多种颜色组成,其中高光的位置,就是最亮的那一点,就是通过cx,cy,fx,fy来进行改变的
案例:
源代码:
<svg width="500" height="150">
<defs>
<radialGradient cx="30%" cy="30%" r="50%" fx="30%" fy="30%" id="grad3">
<stop offset="0%" stop-color="rgb(255,255,255)"/>
<stop offset="100%" stop-color="rgb(0,0,255)"/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>