SVG应用与开发1教学教材

1、Good is good, but better carries it.精益求精，善益求善。SVG应用与开发1-SVG应用与开发林玉东编写一SVG规范1概述SVG是W3C组织制定的一种图形格式规范详细规范请查阅：HYPERLINK/TR/SVG11/TR/SVG11/HYPERLINK/有不少中文资料特点是：矢量图形（类似Flash）基于XML，描述2维图形处理3中图元：矢量图形、图像、文本。图元可以设置样式、可以组合、变换以及蒙版滤镜等处理修改SVG的DOM数据，可以实时改变SVG图形，从而提供简单一致的实时交互的能力。与之对应的有Flash（前面全市SVG的优点）。外部风格页Externa

2、lstylesheetsHYPERLINKtestsvg.html浏览2定义：SVG主要元素和属性2.1基础形状：SVG定义了六种基本形状线、矩形、椭圆、圆、线折、多边形。线（line）：显示两个坐标之间的连线。x1:线开始点x坐标，缺省为0(即不设置改属性则认为0)y1:线开始点y坐标，缺省为0 x2:线结束点x坐标，缺省为0y2:线结束点y坐标，缺省为0矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的x和y半径画成圆角矩形。x:x坐标，缺省为0y:y坐标，缺省为0width:宽度,非0，0不渲染。height:高度,非0，0不渲染。rx

3、/ry：圆角矩形椭圆半径,圆角矩形的圆角过渡部分是一段四分之一的椭圆弧，分别代表其半长轴和半短轴。当只指明了“rx”或“ry”其中的一个时，另一个缺省值与这个相等。如果都不指定，则缺省值为0圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。cx:圆心x坐标，缺省为0cy:圆心y坐标，缺省为0r：圆半径,非0，0不渲染椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。cx:椭圆圆心x坐标，缺省为0cy:椭圆圆心y坐标，缺省为0rx：椭圆x半径,非0，0不渲染ry：椭圆y半径,非0，0不渲染折线（polyline）：显示顶点在指定点的一组线。points:

4、构成折线的点序列，用空格分隔。多边形（polygon）：类似于polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。points:构成多边形的点序列，用空格分隔。2.2高级图元221路径(新一代的开发语言C#/Java都有)d:pathdata值M/m:moveto(x,y)命令，创建一个“当前点”(x,y)：笔的起点L/l:lineto(x,y)命令，从当前点到(x,y)绘制一条线，(x,y)变为当前点H/h:水平lineto(x,y)命令，从当前点到(x,y)绘制一条水平线.V/v:垂直lineto(x,y)命令，从当前点到(x,y)绘制一条垂直线.Z/z:closep

5、ath命令，结束当前路径，从最后一点到开始点绘制一条线。C/cQ/q:2/3次贝塞儿曲线A/a:圆弧命令（rx,ryarcx,y）222图像在指定区域渲染指定的图像。x/y/width/height:描述指定区域xlink:href:URI引用，描述图像文件223文本Hello,outtherex,y表示文本的横纵坐标。dx,dy表示移动的横纵坐标。rotate表示旋转的度数。对齐属性：text-anchor（start|middle|end）字体属性：font-familyfont-stylefont-weightfont-size2.3修饰渲染231注释部分注释内容232定义可重用元素用来

6、定义可重用或不便于在主体内定义，可在中定义。这部分信息可以是属性、组合图元等等。使用方法：将定义的项作为属性使用将定义的项作为元素使用在一个HTML页面上，使用z-index属性来控制这一分层效果，而对于SVG图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。233样式与属性：元素的属性可以直接定义，也可以通过样式来定义，就像HTML一样。与HTML一样，也有3种样式的使用方法：链入外部样式表文件定义内部样式块对象使用style元素text.titlestroke:rgb(127,127,127);fill:none.BKBV-0KVstroke:rgb(127,127,127)

7、;fill:rgb(127,127,127)内联定义使用style属性，与HTML元素一样fill：基础形状的填充色（背景色），有效值后面介绍stroke：边框颜色stroke-width：边框宽度class:引用定义的样式类（有效值是前3个属性）fill-rule属性fill-rule=nonezero|evenoddfill-opacity属性fill-opacity=1|01stroke-opacity属性stroke-linecap=butt|round|squarestroke-linejoin=miter|round|bevel|stroke-dasharray=lengthspa

8、cingstroke-dashoffset=样式的使用也与HTML一样，通过选择府起作用：类选择符使用class属性引用234坐标和变换坐标与坐标系元素：图形的视口（viewport）,可简单的认为该元素描述了图形的坐标系。顶层SVG元素宽高属性有效，X/Y属性无效，宽高指视口的大小，缺省情况下坐标系单位为象素：视口的大小用象素描述，所有的图元的坐标及大小全是象素。嵌套的SVG元素，不常用，可简单的认为是在外层视口内嵌了一个新视口，主要用于坐标偏移：其X/Y属性有效。视口的大小除了绝对数据外，还可以用百分数：width=100%height=100%，这最终都转换为绝对象素。（SVG嵌入网页则

9、该属性无效）。viewBox属性：SVG元素的一个属性，该属性使得图形的坐标变得复杂，SVG的spreserveAspectRatio属性，对viewBox属性有影响，在X/Y2方向有Min/Mid/Max3种值,如xMinYMid表示X方向左对齐Y方向具中对齐。viewBox属性的值是由空格或逗号分割的4值序列、，宽高非付，=0表示不渲染图形，spreserveAspectRatio属性=none则表示将SVG图形、范围的内容映射到视口内！HTML容器：、或者是嵌入SVG控件的元素，他的width/height属性决定了图形的视口的大小。而若采用%值，则大小取决于其上层容器元素的大小。变换变

10、换矩阵：变换矩阵是SVG图形变换的核心概念，一般都用6个双精度数来描述33的仿射变换矩阵，表示为：matrixabcdef，与JAVA/C#一样，采用左乘方式，列优先存储，所以e/f分别为X/Y方向的平移量（translation），a/d分别为X/Y方向的缩放量（scale），b/c为错切(shear)量。设置变换：图元变换通过transform属性实现，其值可以是一个变换矩阵，也可以是变换命令（与JAVA/C#一样），如：X/Y方向的分别平移100/200，可以写为：也可以写作：X/Y方向的分别缩放1/2.5倍，可以写为：也可以写作：;注意：等比缩放，可以写作旋转45度，可以写作：，也可一

11、写作；而旋转的变换矩阵可以统一写为：matrixcos(a)sin(a)sin(a)cos(a)00“组合”变换：即几个变换组合在一起，可表示为：可以简单的写作：235特效滤镜IE提供的滤镜功能Style=”filter:progid:DXImageTransform.Microsoft.gradient(enabled=true,startColorStr=red,endColorStr=white);”,梯度色是滤镜的一子内容。图案GUI软件图元的填充一般用颜色、图案、图片来实现，我们常用的WORD绘制的图元就是如此。WORD的图案可以认为是一个像素图标，用该图标来平铺需要填充的区域，而S

12、VG的图案可以认为是预定义的组合图元，类似我们绘图包的用户自定义图元，用该图元来平铺需要填充的区域。如梯度色又叫渐变色，渐变有两种:线性渐变、放射性渐变。例如动画简单的说SVG采用了SMIL定义的动画元素:animate、set、animateMotion、animateColor，这些元素有一般的属性,如from、to、values等，也有用于样条动画(SplineAnimation)的专用属性,如path、keyTimes、keySplines。比如：另一个例子蒙版、剪切等复合处理剪切蒙版Mask/模糊化3操作4其他相关技术4.1vmlv:*BEHAVIOR:url(#default#VM

13、L)4.2canvasfirefox/opera等支持window.onload=function()/Dothedrawingwhenthedocumentloadsvarcanvas=document.getElementById(square);/Getcanvaselementvarcontext=canvas.getContext(2d);/Get2Ddrawingcontextcontext.fillStyle=#f00;/Setfillcolortoredcontext.fillRect(0,0,90,90);/Fillasquarecanvas=document.getElem

14、entById(circle);/Newcanvaselementcontext=canvas.getContext(2d);/Getitscontextcontext.fillStyle=#00f;/Setbluefillcolorcontext.beginPath();/Beginashapecontext.moveTo(0,0);context.lineTo(50,50);context.arc(50,50,30,0,2*Math.PI,true);context.fill();/FilltheshapeThisisaredsquare:.Thisisabluecircle:.二SVG应

15、用开发1基于浏览器平台的应用开发1.1用脚本操作SVG不同的实现脚本操作不同。Adobe的svgviewer采用ActiveX控件实现，内置一个JavaScript引擎，firefox/opera内置了对SVG的支持（但对SVG规范的支持都不完整）事件SVG规范Interactivity（HYPERLINK/TR/SVG11/interact.html/TR/SVG11/interact.html）一章描述SVG的事件DOM事件：onunload,onabort,onerror,onresize,onscroll,onzoom图形事件：onfocusin,onfocusout,onactiva

16、te,onclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onload动画事件：onbegin,onend,onrepeat,onload开发内容动态创建删除节点动态设置节点属性坐标变换、动画。引入脚本与HTML一样，可以引入外部脚本文件，也可以直接在SVG文件种定义脚本如：functioncircle_click(evt)varcircle=evt.target;varcurrentRadius=circle.getAttribute(r);if(currentRadius=100)circle.setAttrib

17、ute(r,currentRadius*2);elsecircle.setAttribute(r,currentRadius*0.5);AdobeViewer中SVG嵌入的脚本与网页中的脚本的差异:2个JavaScript引擎1.2如何嵌入网页SVG文件可通过以下标签嵌入HTML文档：、或者。Javascript/JScriptVbScript2应用程序模式2.1C#(VB/VC)AdobesvgviewerActiveX控件填写SRC属性，在设计器中即显示出对应的图形2.2JAVABatik是基于java语言实现的一个SVG应用的工具集，用于实现对SVG对象的显示、编辑以及将SVG图形对象转换成其他图片格式，如jpg、gif等。privateJSVGCanvassvgCanvas=neworg.apache.batik.swing.JSVGCanvas();SVGPanel.add(Center,svgCanvas);/一个综合平移、放大和旋转90度的复合变换java.awt.geom.Aff