SVG图形绘制与滤镜效果详解-CSDN博客

这篇博客深入探讨SVG，包括SVG的基本图形绘制、曲线命令、填充规则、元素介绍、渐变效果以及滤镜应用。重点介绍了贝塞尔曲线、椭圆弧参数、颜色填充、滤镜属性和各种滤镜元素的使用，如feBlend、feColorMatrix、feComposite等，还提供了代码示例和Demo演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG简介

SVG 有一些预定义的形状元素，可被开发者使用和操作：

画布<svg>
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
组<g>,<defs>
图片<image>
描述<title>, <desc>
文本<text>

SVG绘制基本图形

<svg width="100%" height="180px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <!--画四边形-->
    <rect x="10" y="10" width="80" height="40" rx="20" ry="10" stroke="red" fill="#EEE" stroke-width="3"></rect>
    <!-- x 为四边形左上角距容器元素左端的距离，y为四边形左上角距容器元素上端的距离 ，width为四边形的宽度，height为四边形的高度,rx为x轴上圆角半径，ry为y轴上圆角半径, stroke为边界的颜色，fill为填充颜色，stroke-width为边界的宽度,opacity为整个四边形的透明度，fill-opacity为填充颜色的透明度，stroke-opacity为边界的透明度，width,height,stroke,fill,stroke-opacity,fill-opacity,stroke-width等可以放到style中-->
    <!--画圆-->
    <circle cx="260" cy="60" r="50"></circle>
    <!-- cx为圆心距容器元素左端的距离， cy为圆心距容器元素上端的距离，r为半径 -->
    <!--画椭圆-->
    <ellipse cx="460" cy="60" rx="80" ry="50"></ellipse>
    <!--cx为椭圆中心点的x坐标，cy为y坐标，rx是水平轴半径，ry是垂直轴半径-->
    <!--画直线-->
    <line x1="560" y1="20" x2="650" y2="100" style="stroke:rgb(99,99,99);stroke-width:2"></line>
    <!--x1,y1为起点坐标， x2，y2为终点坐标-->
    <!--画折线-->
    <polyline stroke="#000" fill="#FFF" stroke-width="1" points="660,20 680,90 720,60"></polyline>
    <!-- points是指这线上的转折点 -->
    <!--画多边形-->
    <polygon stroke="#000" fill="#FFF" stroke-width="1" points="760,20 780,90 820,60"></polygon>
    <!--画曲线-->
    <path d="M853 34C853 94 900 94 900 30" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!--d为曲线绘制命令，详见后面-->
    <!--画水平线-->
    <path d="M910,50H960" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!-- 画竖线 -->
    <path d="M980,10V90" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!-- 画直线 -->
    <path d="M1010,10L1050,90" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!--画平滑曲线，三次贝塞尔曲线情况1-->
    <path d="M1060,50S1080,90 1100,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的S(x1,y1)是(1060,50)-->
    <!--画平滑曲线，三次贝塞尔曲线情况2-->
    <path d="M1060,50S1080,90 1100,50S1120,90 1140,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个S(x1,y1)是(1080,90)关于(1140,50)的对称点-->
    <!--二次贝塞尔曲线-->
    <path d="M1120,50Q1140,90 1160,50" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!---平滑二次贝赛尔曲线情况1-->
    <path d="M1180,50Q1200,90 1220,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个T(x1,y1)是(1200,90)关于(1220,50)的对称点-->
    <!---平滑二次贝赛尔曲线情况2-->
    <path d="M1180,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个T(x1,y1)是(1180,50)-->
</svg>

path命令参考http://www.w3.org/TR/SVG/paths.html

曲线绘制命令

M = moveto 画笔移动到M(x0,y0)
L = lineto 画直线到L(x,y)
H = horizontal lineto 水平线 H(x)
V = vertical lineto 竖线 V(y)
C = curveto 曲线 C(x1,y1,x2,y2,x,y)
S = smooth curveto 平滑曲线S(x2,y2,x,y)，如果上一个命令是C或者S，那么(x1,y1)是上个命令的(x2,y2)关于S的起始点（x`,y`）的对称点，否则就是(x`,y`)。T和这个相同
Q = quadratic Belzier curve 二次贝赛尔曲线(x1,y1,x,y)
T = smooth quadratic Belzier curveto 平滑二次贝赛尔曲线
A = elliptical Arc 椭圆弧 A(rx,ry x-axis-rotation large-arc-flag sweep-flag x,y) rx,ry为椭圆弧对应椭圆的x轴半径和y轴半径，x-axis-rotation为椭圆旋转的角度，large-arc-flag是否是大弧标志未，0表示取小弧，1表示取大弧，sweep-flag表示所取的椭圆，0表示取下面部分，1表示取上面部分，详见附图
Z = closepath 闭合路径，没有参数，时Z前的坐标和起始点左边连成直线，使曲线闭合
*注：对应命令字母大写是绝对路径，小写是相对路径

贝塞尔曲线原理图

贝塞尔曲线参考维基百科http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

画椭圆弧的参数large-arc-flag和sweep-flag取值对应的椭圆弧

SVG填充颜色和绘制边界

填充颜色

(color属性为#ccc,下同)fill="none"fill="currentColor"fill="blue"fill-rule有两个值
nonzero:需要填充颜色的点A向任意方向发射线S，S与图形中的线会有若干个交点，如果该射线和图形中的线的交点B处的方向是顺时针，结果值r加1（r初始值为0），否则减1。最后结果值r如果不等于0，则A处填充颜色，否则不填充颜色。 evenodd:需要填充颜色的点A向任意方向发射线S，S与图形中的线会有若干个交点，若交点个数为基数，则A处填充颜色，否则不填。

fill和stroke参考http://www.cnblogs.com/dxy1982/archive/2012/04/14/2395734.html
W3C标准参考http://www.w3.org/TR/SVG/painting.html#FillProperty

SVG元素介绍

元素	描述
a	定义超链接
altGlyph	允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字）
altGlyphDef	定义一系列象性符号的替换（例如，音乐符号或者亚洲文字）
altGlyphItem	定义一系列候选的象性符号的替换
animate	随时间动态改变属性
animateColor	规定随时间进行的颜色转换
animateMotion	使元素沿着动作路径移动
animateTransform	对元素进行动态的属性转换
circle	定义圆
clipPath
color-profile	规定颜色配置描述
cursor	定义独立于平台的光标
definition-src	定义单独的字体定义源
defs	被引用元素的容器
desc	对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
ellipse	定义椭圆
feBlend	SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix	SVG 滤镜。应用matrix转换。
feComponentTransfer	SVG 滤镜。执行数据的 component-wise 重映射。
feComposite	SVG 滤镜。
feConvolveMatrix	SVG 滤镜。
feDiffuseLighting	SVG 滤镜。
feDisplacementMap	SVG 滤镜。
feDistantLight	SVG 滤镜。 Defines a light source
feFlood	SVG 滤镜。
feFuncA	SVG 滤镜。feComponentTransfer 的子元素。
feFuncB	SVG 滤镜。feComponentTransfer 的子元素。
feFuncG	SVG 滤镜。feComponentTransfer 的子元素。
feFuncR	SVG 滤镜。feComponentTransfer 的子元素。
feGaussianBlur	SVG 滤镜。对图像执行高斯模糊。
feImage	SVG 滤镜。
feMerge	SVG 滤镜。创建累积而上的图像。
feMergeNode	SVG 滤镜。feMerge的子元素。
feMorphology	SVG 滤镜。对源图形执行"fattening" 或者 "thinning"。
feOffset	SVG 滤镜。相对与图形的当前位置来移动图像。
fePointLight	SVG 滤镜。
feSpecularLighting	SVG 滤镜。
feSpotLight	SVG 滤镜。
feTile	SVG 滤镜。
feTurbulence	SVG 滤镜。
filter	滤镜效果的容器。
font	定义字体。
font-face	描述某字体的特点。
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
g	用于把相关元素进行组合的容器元素。
glyph	为给定的象形符号定义图形。
glyphRef	定义要使用的可能的象形符号。
hkern
image
line	定义线条。
linearGradient	定义线性渐变。
marker
mask
metadata	规定元数据。
missing-glyph
mpath
path	定义路径。
pattern
polygon	定义由一系列连接的直线组成的封闭形状。
polyline	定义一系列连接的直线。
radialGradient	定义放射形的渐变。
rect	定义矩形。
script	脚本容器。（例如ECMAScript）
set	为指定持续时间的属性设置值
stop
style	可使样式表直接嵌入SVG内容内部。
svg	定义SVG文档片断。
switch
symbol
text
textPath
title	对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
tref
tspan
use
view
vkern

SVG渐变

线性渐变可被定义为水平、垂直或角形的渐变：
当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

代码

<svg width="100%" height="180px" version="1.1"xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="horizontal_gradient" 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>
        <linearGradient id="vertical_gradient" x1="0%" y1="0%" x2="0%" y2="100%"><!--垂直渐变-->
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"/> 
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        </linearGradient>
        <linearGradient id="angle_gradient" x1="0%" y1="0%" x2="100%" y2="100%"><!--角形渐变-->
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
            <stop offset="40%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        </linearGradient>
        <radialGradient id="radial_gradient" cx="20%" cy="40%" r="50%" fx="50%" fy="50%"><!--角形渐变-->
            <stop offset="0%" style="stop-color:rgb(200,200,00);stop-opacity:0"/>
            <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
        </radialGradient>
        <!--
        cx,cy,r属性：其实也很好理解，环形渐变，当然要定义环的圆心和半径了，定义渐变的范围。
        fx,fy属性：定义颜色中心(焦点)处的位置，也就是渐变色最浓处的坐标；如果想改变一下，就可以设置fx,fy坐标值。
        -->
    </defs>
    <rect x="10" y="10" width="100" height="80" fill="url(#horizontal_gradient)"></rect>
    <rect x="120" y="10" width="100" height="80" fill="url(#vertical_gradient)"></rect>
    <rect x="230" y="10" width="100" height="80" fill="url(#angle_gradient)"></rect>
    <rect x="340" y="10" width="100" height="80" fill="url(#radial_gradient)"></rect>
</svg>

Demo

线性渐变参考http://www.w3school.com.cn/svg/svg_grad_linear.asp
角形渐变http://www.w3school.com.cn/svg/svg_grad_radial.asp

滤镜简介

filter包含以下属性
1. 基本属性： ‘id’, ‘xml:base’, ‘xml:lang’ and ‘xml:space’.
2. 显示属性，如font，color，fill, stroke等, 详细参见http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties
3. xlink属性：‘xlink:type’, ‘xlink:role’, ‘xlink:arcrole’, ‘xlink:title’, ‘xlink:show’ and ‘xlink:actuate’.
4. class
5. style
6. externalResourcesRequired [false | true] false表示添加外部资源是可选的，true表示必须添加外部资源到当前文档 7. x,y,width,height 坐标，长和高
8. filterRes：　该属性定义了中间缓存区域的大小，所以也定义了缓存图片的质量。通常情况下，不需要提供这个值，浏览器自己会选取合适的值。通常，滤镜效果区域应该定义成和背景正好能点和点一一对应，这样会带来一定的效率优势。
9. filterUnits： [userSpaceOnUse | objectBoundingBox] 10. primitivUnits： [userSpaceOnUse | objectBoundingBox]默认userSpaceOnUse
11. xlink:href
详细参考http://www.silverlightchina.net/html/HTML_5/study/2012/0612/16674.html

filter标签中可以包含以下内容：
1. 描述性元素：desc, metadata, title
2. 滤镜元素：‘feBlend’, ‘feColorMatrix’, ‘feComponentTransfer’, ‘feComposite’, ‘feConvolveMatrix’, ‘feDiffuseLighting’, ‘feDisplacementMap’, ‘feFlood’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’, ‘feMorphology’, ‘feOffset’, ‘feSpecularLighting’, ‘feTile’ and ‘feTurbulence’.
3. animate
4. set

滤镜的通用属性：
1. x,y,width,height
2. result 缓存结果标识
3. in 可用的为SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | filter-primitive-reference
SourceGraphic：这个值代表使用当前的图形元素作为操作的输入。
SourceAlpha：这个值代表使用当前图形元素的Alpha值作为操作的输入。
BackgroundImage：这个值代表使用当前的背景截图作为操作的输入。
BackgroundAlpha：这个值代表使用当前的背景截图的Alpha值作为操作的输入。
FillPaint：这个值使用当前图形元素的fill属性的值作为操作的输入。
StrokePaint：这个值使用当前图形元素的stroke属性的值作为操作的输入。
filter-primitive-reference:表示对其他过滤结果的引用

在 filter 中，可用的滤镜有：

feBlend 使用不同的混合模式把两个对象合成在一起。
除了通用属性，feBlend还有in2和mode属性，in2属性和in的取值是一样的，mode属性的取值有normal | multiply | screen | darken | lighten，他们取值如下：
cr = Result color (RGB) - premultiplied 结果颜色
qa = Opacity value at a given pixel for image A 图像A在该处的透明度
qb = Opacity value at a given pixel for image B 图像B在该处的透明度
ca = Color (RGB) at a given pixel for image A - premultiplied 图像A在该处的颜色值
cb = Color (RGB) at a given pixel for image B - premultiplied 图像B在该处的颜色值
透明度计算：qr = 1 - (1-qa)*(1-qb)

图像混合模式	结果颜色值
normal	cr = (1 - qa) * cb + ca
multiply	cr = (1-qa)cb + (1-qb) ca + ca * cb
screen	cr = cb + ca - ca * cb
darken	cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)
lighten	cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

feColorMatrix

除了通用属性，feColorMatrix还有type和value属性
type的取值有 matrix | saturate | hueRotate | luminanceToAlpha type=matrix(矩阵)时，value是一系列的数字（5X5的矩阵）
type=saturate(饱和度)时，value是一个0道1之间的小数，默认1 type=hueRotate(色相旋转)时，value是一个实数，表示角度（0到360），默认0

| R' |     | a00  a01  a02  0  0 |   | R |
| G' |     | a10  a11  a12  0  0 |   | G |
| B' |  =  | a20  a21  a22  0  0 | * | B |
| A' |     | 0    0    0    1  0 |   | A |
| 1  |     | 0    0    0    0  1 |   | 1 |
------------------------------------------------
| a00 a01 a02 |    [+0.213 +0.715 +0.072]
| a10 a11 a12 | =  [+0.213 +0.715 +0.072] +
| a20 a21 a22 |    [+0.213 +0.715 +0.072]
                        [+0.787 -0.715 -0.072]
cos(hueRotate value) *  [-0.213 +0.285 -0.072] +
                        [-0.213 -0.715 +0.928]
                        [-0.213 -0.715+0.928]
sin(hueRotate value) *  [+0.143 +0.140-0.283]
                        [-0.787 +0.715+0.072]
---------------------------------------------------
a00=.213 + cos(hueRotate value)*.787 - sin(hueRotate value)*.213

详细参见http://technet.microsoft.com/zh-cn/library/hh773215
type=luminanceToAlpha时，不需要value。亮度转化为透明度
详细参见http://www.w3.org/TR/SVG/filters.html#feColorMatrixElement

feComponentTransfer
feComponentTransfer是通过RGBA组合而来的
```
C`=feFuncR(C)
C`=feFuncG(C)
C`=feFuncB(C)
C`=feFuncA(C)
<feComponentTransfer>
    <feFuncR></feFuncR>
    <feFuncG></feFuncG>
    <feFuncB></feFuncB>
    <feFuncA></feFuncA>
</feComponentTransfer>
```
feFuncR, feFuncG, feFuncB, feFunc存在type属性，type的取值范围为identity | table | discrete | linear | gamma
type=identity时，C`=C
type=table时，需要tableValues属性
type=discrete时，需要tableValues属性
type=linear时，需要slope和intercept属性，均为数值，C' = slope * C + intercept
type=gamma是，需要amplitude，exponent和offset属性，C' = amplitude * pow(C, exponent) + offset
feComposite
除了通用属性，还需要in2, operator, k1, k2, k3, k4属性
in2和in的取值范围一样
operator的取值范围为，over | in | out | atop | xor | arithmetic，默认over，当operator=arithmetic时，才需要k1，k2，k3，k4属性
operator的各种取值的结果
feConvolveMatrix
feDiffuseLighting漫反射
surfaceScale：定义透明度到z轴的转换比例，默认为1
diffuseConstant：定义曼反射系数，可以是任何非0值，默认1
feDisplacementMap
feFlood无限填充
除了通用属性，还有flood-color和flood-opacity属性，flood-color就是蔓延的颜色，flood-opacity是蔓延的透明度
feGaussianBlur 高斯模糊
除了通用属性，还有stdDeviation（标准差）属性，stdDeviation的值为一个数字的时候，表示x,y轴都使用相同的标准差，如果是两个数字，则x，y轴方向分别使用标准差
feImage用来引入一张外部图片，用做过滤器的结果
feMerge图像合并
feMerge元素可以包含多个feMergeNode元素，feMergeNode元素有in属性
feMorphology 扩边和缩边效果。
除了通用属性，该元素还有operator和radius两个属性
operator的取值范围为erode|dilate，erode表示扩边，dilate表示缩边
radius表示扩边或者缩边的大小，radius取一个值的时候表示想x,y方向都缩放这个大小，radius取两个值的时候，表示x,y方向分别取值
feOffset偏移，制作阴影效果
除了通用属性，该元素还有dx,dy属性，表示偏移的量
feSpecularLighting镜面反射
除了通用属性，该元素还定义了以下属性：
surfaceScale：定义透明度到z轴的转换比例，默认为1
specularConstant：镜面反射系数，可以是任何非0值，默认1
specularExponent：镜面反射的发散程度，取值范围0道128
feTile
当图像不够大时，图像将重复平铺在长width高height的区域里。这个css的background一样
feTurbulence

光源元素feDistantLight,fePointLight,feSpotLight可以作为‘feDiffuseLighting’ 和 ‘feSpecularLighting’的子元素
feDistantLight有azimuth和elevation属性，azimuth表示xy平面中与x构成的角度，elevation表示光的仰角（在立体中，与xy平面构成的角度）
fePointLight有x,y,z属性，定义光源的xyz坐标
feSpotLight有x,y,z,pointsAtX,pointsAtY,pointsAtZ,specularExponent,limitingConeAngle属性，xyz表示光源的坐标，pointsAtX,pointsAtY,pointsAtZ光源所照射的圆锥底部的圆心坐标，specularExponent定义光的强度，limitingConeAngle定义光的发散度，即轴线和母线的角度

滤镜参考http://msdn.microsoft.com/zh-cn/library/ie/hh673563(v=vs.85).aspx
W3C标准http://www.w3.org/TR/SVG/filters.html#FilterElement
参考《SVG开发实践》

代码

Demo

滤镜原图SourceGraphicSourceAlphaBackgroundImageBackgroundAlphaFillPaintStrokePaintfilter-primitive-referenceGaussianBlurstdDeviation=2stdDeviation=4stdDeviation=2stdDeviation=4stdDeviation=2stdDeviation=4stdDeviation=2stdDeviation=4