SVG学习要点

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定义椭圆feBlendSVG 滤镜。使用不同的混合模式把两个对象合成在一起。feColorMatrixSVG 滤镜。应用matrix转换。feComponentTransferSVG 滤镜。执行数据的 component-wise 重映射。feCompositeSVG 滤镜。feConvolveMatrixSVG 滤镜。feDiffuseLightingSVG 滤镜。feDisplacementMapSVG 滤镜。feDistantLightSVG 滤镜。 Defines a light sourcefeFloodSVG 滤镜。feFuncASVG 滤镜。feComponentTransfer 的子元素。feFuncBSVG 滤镜。feComponentTransfer 的子元素。feFuncGSVG 滤镜。feComponentTransfer 的子元素。feFuncRSVG 滤镜。feComponentTransfer 的子元素。feGaussianBlurSVG 滤镜。对图像执行高斯模糊。feImageSVG 滤镜。feMergeSVG 滤镜。创建累积而上的图像。feMergeNodeSVG 滤镜。feMerge的子元素。feMorphologySVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。feOffsetSVG 滤镜。相对与图形的当前位置来移动图像。fePointLightSVG 滤镜。feSpecularLightingSVG 滤镜。feSpotLightSVG 滤镜。feTileSVG 滤镜。feTurbulenceSVG 滤镜。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 中，可用的滤镜有：

1. 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)

   图像混合模式结果颜色值normalcr = (1 - qa) * cb + camultiplycr = (1-qa)*cb + (1-qb) * ca + ca * cbscreencr = cb + ca - ca * cbdarkencr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)lightencr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

2. 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

3. 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
   

4. feComposite
   除了通用属性，还需要in2, operator, k1, k2, k3, k4属性
   in2和in的取值范围一样
   operator的取值范围为，over | in | out | atop | xor | arithmetic， 默认over， 当operator=arithmetic时，才需要k1，k2，k3，k4属性
   operator的各种取值的结果
   
   

5. feConvolveMatrix
   

6. feDiffuseLighting漫反射
   surfaceScale：定义透明度到z轴的转换比例 ，默认为1 
   diffuseConstant：定义曼反射系数，可以是任何非0值，默认1
   

7. feDisplacementMap

8. feFlood无限填充 
   除了通用属性，还有flood-color和flood-opacity属性，flood-color就是蔓延的颜色，flood-opacity是蔓延的透明度 
   

9. feGaussianBlur 高斯模糊
   除了通用属性，还有stdDeviation（标准差）属性，stdDeviation的值为一个数字的时候，表示x,y轴都使用相同的标准差，如果是两个数字，则x，y轴方向分别使用标准差 
   
   

10. feImage用来引入一张外部图片，用做过滤器的结果
    

11. feMerge图像合并
    feMerge元素可以包含多个feMergeNode元素，feMergeNode元素有in属性
    

12. feMorphology 扩边和缩边效果。 
    除了通用属性，该元素还有operator和radius两个属性
    operator的取值范围为erode|dilate，erode表示扩边，dilate表示缩边
    radius表示扩边或者缩边的大小，radius取一个值的时候表示想x,y方向都缩放这个大小，radius取两个值的时候，表示x,y方向分别取值
    

13. feOffset偏移，制作阴影效果
    除了通用属性，该元素还有dx,dy属性，表示偏移的量

14. feSpecularLighting镜面反射
    除了通用属性，该元素还定义了以下属性：
    surfaceScale：定义透明度到z轴的转换比例 ，默认为1 
    specularConstant：镜面反射系数，可以是任何非0值，默认1
    specularExponent：镜面反射的发散程度，取值范围0道128
    

15. feTile
    当图像不够大时，图像将重复平铺在长width高height的区域里。 这个css的background一样

16. 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

缩放和旋转

rotate(angle, cx, cy)