《svg应用与开发》word版

《《svg应用与开发》word版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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

2、al style sheets浏览2．定义：SVG主要元素和属性2.1基础形状：SVG定义了六种基本形状线、矩形、椭圆、圆、线折、多边形。线（line）：显示两个坐标之间的连线。

3、y2="100"stroke-width="5"/>x1:线开始点x坐标，缺省为0(即不设置改属性则认为0)y1:线开始点y坐标，缺省为0x2:线结束点x坐标，缺省为0y2:线结束点y坐标，缺省为0矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的x和y半径画成圆角矩形。x:x坐标，缺省为0y:y坐标，缺省为0wi

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

5、：圆半径,非0，＝0不渲染椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。cx:椭圆圆心x坐标，缺省为0cy:椭圆圆心y坐标，缺省为0rx：椭圆x半径,非0，＝0不渲染ry：椭圆y半径,非0，＝0不渲染折线（polyline）：显示顶点在指定点的一组线。

6、="50,375150,375150,325250,325250,375350,375350,250450,250450,375"/>points:构成折线的点序列，用空格分隔。多边形（polygon）：类似于polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。

7、1"/>points:构成多边形的点序列，用空格分隔。2.2高级图元2．2．1路径(新一代的开发语言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

8、/v:垂直lineto(x,y)命令，从当前点到(x,y)绘制一条垂直线...Z/z:closepath命令，结束当前路径，从最后一点到开始点绘制一条线。C/cQ/q:2/3次贝塞儿曲线A/a:圆弧命令（rx,ryarcx,y）2．2．2图像在指定区域渲染指定的图像。