寄信人:[email protected]标题:SVG专题教程3--图形(3)(转寄)信差:北大未名站BBS信鸽来源:frombbs.whnet.edu.cn(bbs.whnet.edu.cn[202.112.20.132])日期:SatAug405:04:052001
发信人:shanghen(健康是宝，吃得是福),信区:HomePage标题:SVG专题教程3--图形(3)发信站:武汉白云黄鹤站(2001年07月20日13:07:05星期五),站内信件
7.创建多边形源代码:＜?xmlversion=1.0encoding=utf-8?＞＜!--Author:Blueknight,Hangzhou,China2000--＞＜svgwidth=50height=50＞＜polygonpoints=5,545,455,3545,5style=stroke:none;fill:red/＞＜/svg＞讲解:＜polygon.../＞是绘制多边形的标签.points属性依次记录多边形各顶点的坐标.(例子中用了两个折点.请注意,这里的多边形其实已经发生了顶点联线的交错.)style定义了多边形的笔触以及间部的填充效果.大家可以试试将stroke:none改为stroke:blue,体会一下.8.定义路径源代码:＜?xmlversion=1.0encoding=utf-8?＞＜!--Author:Blueknight,Hangzhou,China2000--＞＜svgwidth=50height=50＞＜pathd=M5,5C5,4545,4545,5style=stroke:red;fill:none/＞＜/svg＞讲解:＜path.../＞用于定义路径.d代表数据声明标签,数据就是路径上的关键点的信息集合.M代表Moveto(移动到),M5,5表示先将起点移动到(5,5)处,C代表Curve(贝赛尔曲线控制),C5,4545,4545,5中的绿色点(45,5)表示第二个点的位置,中间的棕色两点(5,45),(45,45)分表代表前一个点(5,5)和后一个点(45,5)的曲柄点位置.＜path＞还包含很多属性,我们将在以后的专题中单独讲解.9.对象的调用源代码:＜?xmlversion=1.0encoding=utf-8?＞＜!--Author:Blueknight,Hangzhou,China2000--＞＜svgwidth=50height=50＞＜defs＞＜rectid=rectwidth=15height=15style=fill:red/＞＜/defs＞＜usex=5y=5xlink:href=#rect/＞＜usex=30y=30xlink:href=#rect/＞＜/svg＞讲解:如果一个SVG对象需要被多次使用,您可以首先对该对象进行声明定义.定义使用＜defs＞＜/defs＞标签,定义中必须包括识别码ID.当您需要使用对象时,使用＜use.../＞标签,并确定放置对象的位置,并利用xlink链接对象的识别码,完成调用.颈昵?并确定放置对象的位置,并利用xlink链接对象的识别码,完成调用. |
