前端入门：HTML（SVG.2）

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>