SVG

最新推荐文章于 2025-08-04 14:15:31 发布

原创最新推荐文章于 2025-08-04 14:15:31 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了SVG（可缩放矢量图形）的基本概念、使用方法、描边和填充样式、渐变效果、图形绘制、结构元素以及滤镜效果。通过实例展示了SVG的各种属性和应用场景，包括线性渐变、径向渐变、旋转、缩放、路径绘制等。

SVG

一、介绍

1、认识

SVG 意为可缩放矢量图形（Scalable Vector Graphics），形状在xml中指定，作为一种xml格式，SVG很容易用Servlet、jsp等web应用程序来生成，这使得它非常适合计算机生成的图形和图表。当我们需要根据数据库数据动态生成图形和图表时，我们更多的使用SVG，当我们更注重图形的动画效果时，我们更喜欢使用canvas，可以直接使用js来控制图形的动态效果。

2、使用

<svg style="border:1px solid red" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect height="100" width="100">
</svg>

定义了一个svg图片，该图片中有一个100*100的矩形，svg默认大小为 300*150，效果如下：

二、样式

1、描边

1）stroke

stroke属性定义描边的颜色。

<svg width="100" height="10">
    <line x1="0" y1="5" x2="100" y2="5" stroke="red"/>
</svg>

效果如下：

2）stroke-width

stroke-width属性定义描边的宽度。

<svg width="100" height="10">
    <line x1="0" y1="5" x2="100" y2="5" stroke="red" stroke-width="4"/>
</svg>

效果如下：

3）stroke-linecap

stroke-linecap属性控制描边终点的形状。

值	含义
butt	默认值，以直边结束线段
square	以直边结束线段，但会微微超出实际路径的范围
round	以圆角结束线段，会微微超出实际路径的范围

<svg width="300" height="100">
    <line x1="10" y1="30" x2="200" y2="30" stroke="red" stroke-width="10" stroke-linecap="butt"/>    
    <line x1="10" y1="60" x2="200" y2="60" stroke="red" stroke-width="10" stroke-linecap="square"/>   
    <line x1="10" y1="90" x2="200" y2="90" stroke="red" stroke-width="10" stroke-linecap="round"/>
    <line x1="10" y1="20" x2="10" y2="100" stroke="black" stroke-width="1"/>
    <line x1="200" y1="20" x2="200" y2="100" stroke="black" stroke-width="1"/>
</svg>

效果如下：

4）stroke-linejoin

stroke-linejoin属性控制两条线段怎么连接。

值	含义
miter	默认值，连接处形成尖角
round	用圆角连接，实现平滑效果
bevel	连接处形成斜接

<svg width="300" height="100">
    <path d="M0,20 L90,60 L10,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="miter"/>
    <path d="M50,20 L140,60 L60,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="round"/>
    <path d="M100,20 L190,60 L110,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="bevel"/>
</svg>

效果如下：

5）stroke-miterlimit

stroke-miterlimit属性在stroke-linejoin="miter"时有效，用于设置最大斜接长度。

<svg width="300" height="100">
    <path d="M0,20 L90,60 L10,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="miter"/>
    <path d="M100,20 L190,60 L110,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="miter" stroke-miterlimit="1"/>
</svg>

效果如下：

6）stroke-dasharray

stroke-dasharray属性用来创建虚线。

<svg height="80" width="300">
    <path stroke-dasharray="5,5" d="M5 20 l215 0"  stroke="red" stroke-width="4" fill="none"/>
    <path stroke-dasharray="10,10" d="M5 40 l215 0"  stroke="red" stroke-width="4" fill="none"/>
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0"  stroke="red" stroke-width="4" fill="none"/>
</svg>

效果如下：

7）stroke-dashoffset

stroke-dashoffset属性定义虚线开始的地方。

<svg height="50" width="300">
    <path stroke-dasharray="10,10" d="M5 20 l215 0"  stroke="red" stroke-width="4" fill="none"/>
    <path stroke-dasharray="10,10" stroke-dashoffset="5" d="M5 40 l215 0"  stroke="red" stroke-width="4" fill="none"/>
</svg>

效果如下：

8）stroke-opacity

stroke-opacity属性控制描边的透明度。

<svg width="100" height="35">
    <line x1="0" y1="5" x2="100" y2="5" stroke="red"/>
    <line x1="0" y1="30" x2="100" y2="30" stroke="red" stroke-opacity="0.5"/>
</svg>

效果如下：

2、填充

1）fill

fill属性用来定义填充的颜色。

<svg width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="red"/>
</svg>

效果如下：

2）fill-rule

fill-rule属性用来确定复杂图形的内部区域，据此来进行填充。

值	含义
nonzero	从svg图像中的某点往任意方向绘制射线，检查图形与射线相交的点，从0开始计数，每次路径线段从左到右穿过射线就加1，从右到左就减1，如果结果为0，则在外边，否则就是在里边。
evenodd	从svg图像中的某点往任意方向绘制射线，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；如果是偶数，该点在图形外部。

<svg width="100" height="100">
    <!-- 顺时针大圆、逆时针小圆 fill-rule="nonzero"-->
    <path d="M50,0 A50,50 0 1,1 50,100 A50,50 0 1,1 50,0 M50,20 A30,30 0 1,1 50,80 A30,30 0 1,1 50,20" stroke="red" fill="green" fill-rule="nonzero"/>
</svg>
<svg width="100" height="100">
    <!-- 顺时针大圆、逆时针小圆 fill-rule="evenodd"-->
    <path d="M50,0 A50,50 0 1,1 50,100 A50,50 0 1,1 50,0 M50,20 A30,30 0 1,1 50,80 A30,30 0 1,1 50,20" stroke="red" fill="green" fill-rule="evenodd"/>
</svg>

效果如下：

3）fill-opacity

fill-opacity属性定义填充的透明度。

<svg width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="red"/>
</svg>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="red" fill-opacity="0.5"/>
</svg>

效果如下：

4）viewBox

viewBox是视区盒子的意思，相当于把viewBox中的内容铺满整个svg图像来显示。

viewBox="x, y, width, height"

x：左上角横坐标
y：左上角纵坐标
width：宽度
height：高度

例如：

<svg width="200" height="150" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
    <!--显示viewBox-->
    <rect x="0" y="0" width="40" height="30" fill="none" stroke="red"/>
</svg>

不加viewBox时和加viewBox时，效果如下：

5）preserveAspectRatio

上述viewBox例子中，viewBox的宽高比和svg的宽高比一致，但是实际中很难如此，所以就需要preserveAspectRatio属性了。

preserveAspectRatio="xMidYMid meet";

第一个值表示viewBox如何与SVG对齐，有两部分组成，前半部分表示向x方向对齐，后半部分表示向y方向对齐，有以下取值：

值	含义
xMin	viewport和viewBox左边对齐
xMid	viewport和viewBox x轴中心对齐
xMax	viewport和viewBox右边对齐
YMin	viewport和viewBox上边缘对齐。注意Y是大写。
YMid	viewport和viewBox y轴中心点对齐。注意Y是大写。
YMax	viewport和viewBox下边缘对齐。注意Y是大写。

- 第二个值表示如何维持宽高比，有以下取值：

值	含义
meet	保持纵横比缩放viewBox适应viewport
slice	保持纵横比同时比例小的方向放大填满viewport
none	扭曲纵横比以充分适应viewport

6）裁剪

<clipPath>元素用来裁剪，它的作用相当于一个蒙版，可以限制哪些地方可见，哪些地方不可见，在该元素指定的区域之外的所有内容都不会被显示，<clipPath>元素需要使用clip-path属性来应用。

<defs>
    <clipPath id="myClip">
        <circle cx="30" cy="30" r="20"/>
        <circle cx="70" cy="70" r="30"/>
    </clipPath>
</defs>

例如：绘制一个红色的长方形，给其进行剪裁操作。

<rect x="0" y="0" width="120" height="120" fill="red" clip-path="url(#myClip)"/>

效果如下：

3、渐变

1）线性渐变

<linearGradient>元素就是用来定义渐变色的，<linearGradient>元素必须放在元素内。

<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
</defs>

id属性定义了这个渐变色的唯一标志
(x1,y1)和(x2,y2)定义了渐变色的起始位置和结束位置
元素定义渐变色的颜色组成，可以是2个或2个以上
offset属性定义该颜色的位置

通过id属性来调用该渐变色

<circle cx="50" cy="50" r="50" fill="url(#grad1)">

效果如下：

2）径向渐变

<radialGradient>元素就是用来定义渐变色的，<radialGradient>元素必须放在<defs>元素内。

<defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </radialGradient>
</defs>

id属性定义了这个渐变色的唯一标志
(cx,cy)和r属性定义了辐射的最大圆
fx和fy属性定义了辐射的焦点
元素定义渐变色的颜色组成，可以是2个或2个以上
offset属性定义该颜色的位置

通过id属性来调用该渐变色

<circle cx="50" cy="50" r="50" fill="url(#grad2)">

效果如下：

4、变换

变换都是通过元素的transform属性完成，变换可以连缀，只要把它们连接起来，用空格隔开即可。

原始图形：

<svg width="100" height="30">
    <rect x="0" y="0" width="30" height="10" fill="red"/>
    <rect x="0" y="0" width="100" height="30"  fill="none" stroke="red"/>
</svg>

效果如下：

1）平移

使用translate()进行平移。

<rect x="0" y="0" width="30" height="10" transform="translate(30,10)" fill="red"/>

将矩形移到位置(30,10)，效果如下：

2）旋转

使用rotate()进行旋转。

<rect x="0" y="0" width="30" height="10" transform="rotate(45)" fill="red"/>

将矩形旋转45度，效果如下：

3）斜切

利用矩形来制作斜菱形，使用skewX()和skewY()来进行斜切。

<rect x="0" y="0" width="30" height="10" transform="skewX(45)" fill="red"/>
<rect x="0" y="0" width="30" height="10" transform="skewY(45)" fill="red"/>

x方向斜切45度和Y方向斜切45度，效果分别如下：

4）缩放

使用scale()来对元素进行缩放，修改元素尺寸。

scale(sx[, sy])

sx：表示横坐标缩放比例
sy：表示纵坐标缩放比例，如果缺省，则表示和sx一样的值。

<rect x="0" y="0" width="30" height="10" fill="red" transform="scale(2)"/>

对图形放大2倍，效果如下：

5）变形矩阵

使用matrix(a, b, c, d, e, f)为图形设置变形矩阵。

三、图形

1、描边

1）直线

<line>元素绘制直线

<line x1="0" y1="0" x2="100" y2="100"/>

(x1,y1)：起点的坐标
(x2,y2)：终点的坐标

例如：绘制一条直线

<svg width="100" height="100">
    <line x1="0" y1="0" x2="100" y2="100" stroke="red"/>
</svg>

效果如下：

2）折线

<polyline>元素绘制折线

<polyline points="0,0 90,40 30,80"/>

points：点集数列，每一个点坐标内部用逗号分隔，每一个点坐标之间用空格分隔。

由于图形默认是填充的，要想不填充，就要显示设置fill="none"。

例如：绘制一条折线

<svg width="100" height="100">
    <polyline points="0,0 90,40 30,80" stroke="red" fill="none"/>
</svg>

效果如下：

3）多边形

<polygon>元素绘制多边形

<polygon points="0,0 90,40 30,80" stroke="red" fill="none"/>

points：点集数列，每一个点坐标内部用逗号分隔，每一个点坐标之间用空格分隔。

<polyline>与<polygon>的区别是<polyline>元素不会绘制最后一个点到第一个点之间的线。

例如：绘制一个三角形

<svg width="100" height="100">
    <polygon points="0,0 90,40 30,80" stroke="red" fill="none"/>
</svg>

效果如下：

2、填充

1）矩形

<rect>元素绘制矩形

<rect x="10" y="10" width="100" height="100" rx="0" rx="0"/>

(x,y)：矩形左上角坐标
width：矩形的宽度
height：矩形的高度
rx：圆角x方位的半径
ry：圆角y方位的半径

例如：一个圆角矩形

<svg width="120" height="120">
    <rect x="20" y="20" rx="30" ry="10" width="100" height="100" fill="red"/>
</svg>

效果如下：

2）圆形

<circle>元素绘制圆形

<circle cx="50" cy="50" r="50"/>

(cx,cy)：圆心坐标
r：圆的半径

例如：一个圆

<svg <svg width="100" height="100">>
    <circle cx="50" cy="50" r="50" fill="red"/>
</svg>

效果如下：
>

3）椭圆

<ellipse>元素绘制椭圆

<ellipse cx="75" cy="50" rx="75" ry="50"/>

(cx,cy)：椭圆中心位置
rx：椭圆的x半径
ry：椭圆的y半径

例如：一个椭圆

<svg width="150" height="100">>
    <ellipse cx="75" cy="50" rx="75" ry="50" fill="red"/>
</svg>

效果如下：
>

3、路径

<path>元素用于绘制组合线条、弧线、曲线等填充或非填充的高级形状，主要通过d属性指定。

<path d=""/>

1）移动画笔

d属性的第一个绘图命令是移动命令，在绘制任何东西之前，都应该将虚拟画笔移动到某个位置。

<path d="M30,30" stroke="red" fill="none"/>

将画笔移到了点(30,30)。

2）线条

绘制线条是使用L和l命令完成。

<path d="M30,30 L90,90" stroke="red" fill="none"/>

绘制了从(30，30)-(90,90)的线，效果如下：

L和l命令之间的取别在于，大写L命令后面跟的是一个绝对定位的点，小写l命令后跟的是一个相对定位的点，相对点是虚拟画笔开始绘制线之前的点加上l命令后跟的坐标。

3）弧线

绘制圆弧是使用A或a命令，分别是使用绝对坐标和相对坐标。

<path d="A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y"/>

rx：x方向上的半径
ry：y方向的半径
x-axis-rotatio：设置相当于正常x轴旋转一定角度的弧的x轴
large-arc-flag：决定绘制满足起点、终点、rx、ry的大圆弧还是小圆弧，为0绘制小圆弧
sweepflag：决定圆弧从起点到终点的绘制为顺时针还是逆时针，为0代表逆时针
(x,y)：为终点坐标

例如：画一个圆弧

<svg width="100" height="100">
    <path d="M30,30 A50,50 0 0,0 90,90" stroke="red" fill="none"/>
</svg>

效果如下：

4）贝塞尔曲线

（1）二次贝塞尔曲线

使用Q和q命令绘制二次贝塞尔曲线。

<path d="Qx1,y1 x,y"/>

(x1,y1)：是控制点坐标
(x,y)：是结束点坐标

例如：绘制一个二次贝塞尔曲线

<svg width="100" height="100">
    <path d="M30,30 L30,90" stroke="red" fill="none"/>
    <path d="M30,90 L90,90" stroke="red" fill="none"/>
    <path d="M30,30 Q30,90 90,90" stroke="red" fill="none"/>
</svg>

效果如下：

事实上，如果你从起点到控制点绘制一条线，再从控制点到终点绘制另一条线，那么这两条线的中点之间的连线将是曲线的切线。

（2）三次贝塞尔曲线

使用C和c命令绘制三次贝塞尔曲线，同样前者使用绝对坐标，后者使用相对坐标。

<path d="Cx1,y1 x2,y2 x,y"/>

(x1,y1)：曲线的开始控制点
(x2,y2)：曲线的结束控制点
(x,y)：曲线的终点

例如：绘制一个三次贝塞尔曲线

<svg width="100" height="100">
    <path d="M30,30 L30,90" stroke="red" fill="none"/>
    <path d="M90,30 L90,90" stroke="red" fill="none"/>
    <path d="M30,30 C30,90 90,30 90,90" stroke="red" fill="none"/>
</svg>

效果如下：

5）闭合路径

Z和z命令用来控制闭合路径，意味着绘制一条从起点到终点的线段，大小写命令没区别。

<path d="Z"/>

例如：绘制一个三角形

<svg width="100" height="100">
    <path d="M30,30 L90,90 L90,30 Z" stroke="red" fill="none"/>
</svg>

效果如下：

6）符号缩写

多次使用相同的命令字母，可以省略命令字母，仅仅需要提供一组额外的参数

7）路径命令

<path>元素常用命令整理，每个命令由一组数字（坐标等）组成，它们是该命令的参数，大写命令通常将坐标参数解释为绝对坐标，小写命令通常将坐标解释为当前虚拟画笔的相对位置。

命令	参数	名称	描述
M	x,y	移至	将虚拟画笔移动到指定点x,y处而不绘制图。
m	x,y	移至	将虚拟画笔移动至相对于其当前坐标的x,y处而不进行绘图操作。
L	x,y	线路	从虚拟画笔当前位置绘制一条到x,y点的直线。
l	x,y	线路	从虚拟画笔当前位置绘制一条到相对于画笔当前位置的x,y点的直线。
H	x	水平线	绘制一条到指定点（x坐标由参数指定，y坐标为虚拟画笔当前的纵坐标）的水平线。
h	x	水平线	绘制一条到指定点（x坐标为虚拟画笔当前横坐标+指定的x，y坐标为虚拟画笔当前的纵坐标）的水平线。
V	y	垂直线	绘制一条到指定点（x坐标为虚拟画笔当前横坐标，y坐标由参数指定）的垂直线。
v	y	垂直线	绘制一条到指定点（x坐标为虚拟画笔当前横坐标，y坐标为虚拟画笔当前的纵坐标+参数指定的值）的垂直线。
C	x1,y1 x2,y2 x,y	曲线	从画笔当前点到x,y点绘制一条三次贝塞尔曲线。x1,y1和x2,y2是曲线的开始和结束控制点，控制其如何弯曲。
c	x1,y1 x2,y2 x,y	曲线	与C相同，但是坐标点为相对于画笔坐标的位置。
S	x2,y2 x,y	平滑曲线缩写	从画笔位置到点x,y绘制一条三次贝塞尔曲线。x2,y2为结束控制点。开始控制点与前一条曲线的结束控制点相同。
s	x2,y2 x,y	平滑曲线缩写	与S相同，但是坐标点为相对于画笔坐标的位置。
Q	x1,y1 x,y	二次贝塞尔曲线	从画笔当前坐标到x,y点绘制一条二次贝塞尔曲线。x1,y1是控制曲线如何弯曲的控制点。
q	x1,y1 x,y	二次贝塞尔曲线	与Q相同，但是坐标点为相对于画笔坐标的位置。
T	x,y	平滑二次贝塞尔曲线缩写	从画笔位置到点x,y绘制一条三次贝塞尔曲线。控制点与所使用的的最后一个控制点相同。
t	x,y	平滑二次贝塞尔曲线缩写	与T相同，但是坐标点为相对于画笔坐标的位置。
A	rx,ry x-axis-rotation large-arc-flag,sweepflag x,y	椭圆弧	从当前点到x,y点绘制一条椭圆弧。rx和ry为椭圆在x和y方向上的半径。x-rotation确定圆弧围绕x轴旋转的角度。当rx和ry的值不同时，它才会有效果。large-arc-flag似乎没有被使用（可以为0或1）。值（0或1）都不会改变圆弧。
a	rx,ry x-axis-rotation large-arc-flag,sweepflag x,y	椭圆弧	与A相同，但是坐标点为相对于画笔坐标的位置。
Z		闭合路径	通过从当前点到第一个点绘制一条线来关闭路径。
z		闭合路径	通过从当前点到第一个点绘制一条线来关闭路径。

4、文本

1）简单绘制

<text>元素用来定义文字文本。

<text x="0" y="15" fill="red">SVG是个好东西！</text>

效果如下：

SVG是个好东西！

2）旋转角度

通过transfor属性进行旋转。

<text x="0" y="15" fill="red" transform="rotate(30 20,40)">SVG是个好东西！</text>

效果如下：

SVG是个好东西！

3）多行文本

使用<tspan>元素给文本分组，分别给予不同的样式。

<text x="10" y="20" style="fill:red;">这里有几行文字：
    <tspan x="10" y="45">这是第一行文字。</tspan>
    <tspan x="10" y="70">第二行文字在这里。</tspan>
</text>

效果如下：

这里有几行文字：
这是第一行文字。
第二行文字在这里。

4）添加链接

使用<a>元素给文本给添加超链接。

<a href="http://www.baidu.com" target="_blank">  
    <text x="0" y="15" fill="red">SVG是个好东西！</text>
</a>

效果如下：

SVG是个好东西！

5）文本路径

在svg中，不仅能处理沿直线方向的文字，还能够处理按照指定路径<path>的文字，使文字沿着该路径排列。<textPath>元素就是用来引用预定义的<path>。

预定义路径

<defs>
    <path id="MyPath" d="M10,10 C100,80 130,0 250,70" />
</defs>

指明路径

<text font-family="Verdana" font-size="10">
    <textPath xlink:href="#MyPath">
      SVG是个好东西！SVG是个好东西！SVG是个好东西！
    </textPath>
</text>
<path id="MyPath" d="M10,10 C100,80 130,0 250,70" stroke="red" fill="none"/>

效果如下：

SVG是个好东西！SVG是个好东西！SVG是个好东西！

四、结构元素

1、g

<g>元素定义统一的样式，可以把属性赋给它所有的子元素。

<g fill="red">
    <rect x="0" y="0" width="10" height="10" />
    <rect x="20" y="0" width="10" height="10" />
</g>

效果如下：

2、defs

<defs>元素定义可重用的部件，供其他元素使用。

<svg width="70" height="30">
    <defs>
        <g id="myRect" fill="red" width="20" height="10">
            <circle style="fill:inherit" r="10"/>
        </g>
    <defs>
</svg>

<defs>元素只是定义，并不会绘制，要想显示出效果，就看下一个元素<use>。

3、use

<use>标记的作用是能从SVG文档内部取出一个节点，克隆它，并把它输出到别处。

<use x="40" y="0" xlink:href="#myRect"/>

例如：

<svg width="100" height="100">
    <defs>
        <g id="Port">
            <circle style="fill:inherit" r="50"/>
        </g>
    </defs>
    <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
</svg>

效果如下：

4、symbol

<symbol>元素的作用使定义一个图像模板，可以使用<use>元素来使用它。

<symbol id="shape1" preserveAspectRatio="xMinYMin meet" viewBox="0 0 50 100">
    <rect x="0" y="0" width="50" height="50" style="fill:green;"/>
</symbol>

效果如下：

五、滤镜

使用<filter>元素来定义滤镜，它有一个id属性，是这个过滤器的标志，滤镜元素都要定义在<defs>元素中，使用filter="url(#f1)"来引用滤镜。

1、滤镜种类

<feBlend>
<feColorMatrix> – 颜色变换
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset> – 阴影效果
<feSpecularLighting>
<feTile>
<feTurbulence>
<feDistantLight> – 灯光效果
<fePointLight> – 灯光效果
<feSpotLight> – 灯光效果-

2、模糊滤镜

使用<feGaussianBlur>元素来产生模糊效果。

<defs>
    <filter id="f1" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="15" 
    />
    </filter>
</defs>

使用<feGaussianBlur>标记定义模糊效果
in=”SourceGraphic”属性指明了模糊效果要应用于整个图片
stdDeviation属性定义了模糊的程度

<svg width="230" height="120">
    <filter id="blurMe">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <circle cx="60"  cy="60" r="50" fill="green" />
    <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>

绘制了两个圆，效果如下：

3、阴影滤镜

使用<feOffset>元素使图像偏移，然后使用<feBlend>元素进行图像合并，来实现图像的阴影效果。

<defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
        <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
</defs>

绘制了一个正方形

<svg height="120" width="120">
    <defs>
        <filter id="f1" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
            <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

效果如下：

然后进行模糊处理

<svg height="140" width="140">
    <defs>
        <filter id="f2" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>

效果如下：

4、颜色滤镜

使用<feColorMatrix>元素来根据颜色矩阵来修改目标图形的色彩效果，每一个小苏的颜色值（RGBA来表示）乘以矩阵获得新的颜色值。

<filter id="colorMeMatrix">
    <feColorMatrix in="SourceGraphic"
          type="matrix"
          values="0 0 0 0 0
                  1 1 1 1 0
                  0 0 0 0 0
                  0 0 0 1 0" />
</filter>

type属性的值可以是matrix | saturate | hueRotate | luminanceToAlpha

画三个圆

<svg width="100" height="100">
    <g>
        <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
        <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
    </g>
</svg>

原图效果：

使用滤镜后的效果：

5、光照滤镜

使用<feDiffuseLighting>元素来产生光照效果滤镜。

<filter id="lightMe1">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
        <fePointLight x="150" y="60" z="20" />
    </feDiffuseLighting>
    <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>

画一个圆

<svg width="440" height="140">
    <circle cx="60" cy="80" r="50" fill="green" />
</svg>

原图效果和使用滤镜后的效果：