欢迎来到天天文库
浏览记录
ID:29647456
大小:341.51 KB
页数:12页
时间:2018-12-21
《《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坐标,缺省为0wi4、dth:宽度,非0,=0不渲染。height:高度,非0,=0不渲染。rx/ry:圆角矩形椭圆半径,圆角矩形的圆角过渡部分是一段四分之一的椭圆弧,分别代表其半长轴和半短轴。当只指明了“rx”或“ry”其中的一个时,另一个缺省值与这个相等。如果都不指定,则缺省值为0圆(circle):显示一个圆心在指定点、半径为指定长度的标准的圆。cx:圆心x坐标,缺省为0cy:圆心y坐标,缺省为0r5、:圆半径,非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)绘制一条水平线...V8、/v:垂直lineto(x,y)命令,从当前点到(x,y)绘制一条垂直线...Z/z:closepath命令,结束当前路径,从最后一点到开始点绘制一条线。C/cQ/q:2/3次贝塞儿曲线A/a:圆弧命令(rx,ryarcx,y)2.2.2图像在指定区域渲染指定的图像。
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)绘制一条水平线...V8、/v:垂直lineto(x,y)命令,从当前点到(x,y)绘制一条垂直线...Z/z:closepath命令,结束当前路径,从最后一点到开始点绘制一条线。C/cQ/q:2/3次贝塞儿曲线A/a:圆弧命令(rx,ryarcx,y)2.2.2图像在指定区域渲染指定的图像。
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)绘制一条水平线...V8、/v:垂直lineto(x,y)命令,从当前点到(x,y)绘制一条垂直线...Z/z:closepath命令,结束当前路径,从最后一点到开始点绘制一条线。C/cQ/q:2/3次贝塞儿曲线A/a:圆弧命令(rx,ryarcx,y)2.2.2图像在指定区域渲染指定的图像。
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图像在指定区域渲染指定的图像。
此文档下载收益归作者所有