SVG语法教程指南-Perl文档类资源-CSDN下载

该资源内容由用户上传，如若侵权请选择举报

SVG语法教程指南

4星（超过85%的资源）

所需积分/C币：50 2014-07-06 16:27:31 126KB PDF
40

收藏
举报

SVG 是由 W3C 制定的基于可扩展标记语言 XML 来描述二维矢量图型的一个开放标准这个文档是我在使用Perl的SVG模块时用来做为查询文档来使用的但是其实这个文档是在网页内进行SVG编码使用的但是大同小意主要是中文的用作参考 ">SVG 是由 W3C 制定的基于可扩展标记语言 XML 来描述二维矢量图型的一个开放标准这个文档是我在使用Perl的SVG模块时用来做为查询文档来使用的但是其实这个文档是在网页内进行SVG编码使用的但是大同小意主要是中文的 [更多]
Circle cx=100 cy=50 r=40 stroke="black stroke- width=2″千il|=red </svg> 查看例子(仅用于支持SVG的浏览器) (如需查看SvG源代码,请打开比例,然后在窗口中右击。选择“查看源代码”。) 2.2代码解释第一行包含了XML声明。请注意 standalone属性,这个属性规定本SVG文件是独立的还是包含一个对外部文件的引用 standa|one="no"意味着本SVG文档包含一个对外部文件的引用,比如说DTD 文件。第二和第三行引用了这个外部的 SVG DTD。该DTD位于 http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtD该DTD位于W3C, 含有所有允许的SVG元素 SvG文档以根元素<svg>开始,包含开始标签<svg>和结束标签√svg> width 和 he i ght属性用来设置SVG文档的宽和高, Version属性定义了SVG的版本, xmns属性定义了SvG的名称空间。 < circle元素用来划一个圆。cx和cy属性定义了圆中心点的x,y坐标。如果cx,cy省略,则圆以(0,0)点为中心。r属性定义了圆的半径 Stroke和 stroke- width属性控制图形的外轮廓。我们给圆设置了一个宽2px 的黑色边框。 fi属性指出了图形的颜色。我们给圆设置了红色 </svg>标签则结束了svg根元素和本文档。注意:所有开始标签必须有对应的结束标签三、在HTML页面中的插入SVG SvG文件可通过以下标签嵌入HTML文档:< embed〉、< ob ject>或者< i frame>。下面你将看到SVG嵌入到HTML文档的三种方法 3.1使用< embed>标签所有主流浏览器都支持< embed>标签,允许使用脚本注释: Adobe syg viewer推荐您使用< embed>标签来将SVG包含进HTML文档!但是,当你要创建有效的ⅪHTML文档的时候,你不能使用< embed>。因为任何一个HTML的推荐标准里都不推荐< embed>标签。语法: Embed src=/rect. svg width="300 height=100 type=image/svg+xml pluginspage=http://www.adobe.com/svg/viewer/install//> 注释: plug inspage属性指岀了插件下载的地址。提示:E浏览器支持一个附加的属性, wmode=" transparent",用来使HTML 背景透明。 3.2使用< ob ject>标签 ob ject标签是HTML4的标准标签,被所有新的浏览器支持。缺点是他不支持脚本。注意:如果你安装的最近版本的 Adobe svg viewer,运用< ob ject>标签SvG 文件将不工作(至少不能在E中工作) 语法 Kobject data="rect. svg width="300 height=100 type= image/svg+xml codebase=http://www.adobecom/svg/viewer/install//> 注释: codebase属性指岀插件下载的地址 3.3使用< i frame>标签 < i frame>标签可以在大部分的浏览器里工作。语法 Iframe src="/ rect. svg width="300 he i ght=100"> K/i frame> 3.4我最期望的方式如果我们可以运用SVG命名空间,直接将SVG元素添加到HTML里,那真是太棒了!就像下面这个样子 <html xmins:svg=http://www.w3.org/2000/svg> <body> Kp>This is an HTML paragraph/p> Svg: circle Cx=100 cy= 50 c <svg: svg width="300 he i ght=100 version=1.1> r=40 stroke= black stroke-width=2 fill= red"/> svg. svg </body> </htmI> 四、SVG<rect> Svg有一些预定义的可以直接使用操作的图形元素 Rectangle rect> Circle <circle> Ellipse ellipse> Line <line Poly ine <poly l ine> Polygon <po lygon> Pathpath> 下面将详细介绍每一个元素,从rect开始。 The <rect> Tag <rect>用来生成矩形或矩形的变种为了理解<rect>怎么工作,复制下面的代码到记事本,然后保存为 rect1.svg到你的网页目录。 <?xmI version=1.0 standa l one=no ? <! DOCTYPE Svg PUBL"-/W3C//DTD SVG 1.1//EN http://www.w3.org/graphics/svG/1.1/dtd/svg11.dtd> Svg width=100% he i ght=100% version=1.1 xmins=htTp://www.w3.org/2000/svg> Rect width= 300 he i ght=100 style="fill: rgb(0, 0, 255); stroke-width: 1 stroke: rgb(0, 0, 0)"/> SV g 代码解释 Width和 he ight属性指出举行的宽和高。 sty le属性定义css属性 fi属性定义矩形填充的颜色(rgb值,颜色值,十六进制值) stroke- width属性指定矩形填充线宽。 stroke属性指定矩形 border颜色再看一个带有新属性的例子 K?xmI version=1.0 standalone=no ? K! DOCTYPE svg PUBL IC -//W3C//DTD SVG 11//EN http://www.w3.org/graphics/svG/1.1/dtd/svg11.dtd> Svg width="100% he i ght=100% version="1.1 xmins=hTtp://www.w3.org/2000/svg> Rect x=20 y=20 width=250 he i ght=250 style=fill: blue; stroke: pink; stroke-width: 5 fill-opacity: 0.1; stroke-opacity: 0.97> K/svg> 代码解释 ⅹ属性定义矩形的左位置(例如ⅹ="0"将矩形放在距 window窗口左端0px 处) y属性定义矩形距上端的位置(例如y="o"将矩形放在距 window窗口上部 0p×处) css fill-- opacity属性定义填充颜色的透明度(从0到1 cSs stroke- opacity属性定义描边颜色的透明度(从0到1) 为整个元素定义元素例子 <?xm version=1.0 standa lone=no ? <! DOCTYPE Svg PUBLIC"-/W3C//DTD SVG 1.1//EN http://www.w3.org/graphics/svG/1.1/dtd/svg11.dtd> Svg width=100% hei ght=100% vers ion=1. 1 xmins=htTp://www.w3.org/2000/svg> Rect x=20 y=20 width=250 height=250 sty le=fil: blue; stroke: pink; stroke-width: 5 opacity: 0.97> svg 代码解释: CSS opacit属性定义整个元素的透明度(从0到1) 下一个例子,创建一个圆角矩形 <? xmI version=1.0 standalone= no ? K! DOCTYPE svg PUBL IC-//W3C//DTD SVG 1.1//EN http://www.w3.org/graphics/sVg/1.1/dtd/svg11.dtd> <svg width=100% hei ght=100% version=1.1 xmins=hTtp://www.w3.org/2000/svg> < rect x="20"y="20"rx="20"ry="20" width="250 he i ght=100 sty le=fill: red; stroke: bl ack; stroke-width: 5: opacity: 0.5/> </svg> 代码解释 rx and ry属性定义举行的圆角五、SVG< circle < circle>属性用来创建一个圆。将下列代码复制进记事本,并保存成.svg,放在你的web目录。 <?xmI version=1.0 standalone= no ? < DOCTYPE svg PUBL IC -//W3C//DTD SVG 11//EN http://www.w3.org/graphics/Svg/1.1/dtd/svg11.dtd"> Svg width=100% hei ght=100% vers ion=1. 1 xmins=hTtp://www.w3.org/2000/svg> Circle cx=100 cy=50 r=40 stroke=black stroke-width=2 fill=red/> </svg> View example 代码解释: cx and cy属性定义圆心的x,y坐标,如果省略,在圆心为(0,0) r属性定义圆的半径六、SvG< el l ipse> < el ipse>标签用来创建一个椭圆。椭圆类似于圆不同仅仅在于椭圆有下 y两个值不同半径,而圆的x,y半径值相同。复制下面代码到记事本,存为 ellipse1.svg,放在你的web目录里 <?xmI version=1.0 standa l one="no ? <! DOCTYPE Svg PUBLIC -//3C//DTD SVG 1. 1//EN http://www.w3.org/graphics/svG/1.1/dtd/svg11.dtd> <svg width=100% he i ght=100% version=1.1 xmins="hTtp://www.w3.org/2000/svg> < el l ipse cx="300"cy="150"rx="200"ry="80 style="fill: rgb(200, 100, 50) stroke: rgb(0, 0, 100); stroke-w i dth 2"/> svg 代码解释: Cx指出椭圆的中心点的x坐标 cy指出椭圆的中心点的y坐标 rx指出椭圆的横向半径 ry指出椭圆的纵向半径下面例子创建三个叠加的椭圆 <? xmI version=1.0 standa I one= no ? <! DOCTYPE SVg PUBLIC -//W3C//DTD SVG 11//EN http://www.w3.org/graphics/svG/1.1/dtd/svg11.dtd> Svg width=100% hei ght=100% vers ion=1.1 xmins=htTp://www.w3.org/2000/svg> < ellipse cx="240"cy="100"r×="220″ry="30 style= fill: purple/> Ellipse cx=220 cy=70 rx=190 ry=20 sty le=fill: I ime/> < el lipse cx="210"cy="45"rx="170"ry="15 ty le=fill: ye l low/> svg View example 下面例子将两个椭圆组合: K?xmI version=1.0 standa l one=no ? K! DOCTYPE svg PUBLIC -/W3C/DTD SVG 1.1//EN http://www.w3.org/graphics/sVg/1.1/dtd/svg11.dtd> Svg width=100% he i ght=100% vers i on=1.1 xmins=hTtp://www.w3.org/2000/svg> Kel lipse Cx=240 cy=100 rx=220 ry=30 style=fill: ye l low/> <e| Ipse CX="220"cy="100rx=190ry=20 style= fill: white/> svg Iew examp le 七、SVG<line> <line>标签用来创建一条直线复制下列代码到记事本,存成|ine1.svg,放在你的web目录下 K?xmI vers ion=1.0 standa lone=no ? K! DOCTYPE Svg PUBL"-//W3C//DTD SVG 1.1//EN http://www.w3.org/graphics/svG/1.1/dtd/svg11.dtd> Svg width=100% he i ght=100% vers ion=1 xmins=hTtp://www.w3.org/2000/svg> < line x1="0"y1="0x2=300y2=300 style= stroke: rgb(99, 99, 99); stroke-width: 2/> </svg> 代码解释 x1指定起点的ⅹ坐标 y1指定起点的y坐标 x2指定终点的x坐标 y2指定终点的y坐标八、SVG< po lygon> po lygon>标签用来创建一个多于三个边的图形。父子下面代码倒记事本,存成 po lygon1.svg,放在你的web目录下 <?xmI version=1.0 standalone= no ? K! DOCTYPE SVg PUBLIC -//W3C//DTD SVG 1.1//EN http://www.w3.org/graphIcs/svg/1.1/dtd/svg11.dtd> Svg width=100% he i ght=100% vers ion=1. 1 xmins="Http://www.w3.org/2000/svg"> < polygon points="220,100300,210170,250 sty le= fill: #cccccc; stroke: #000000: stroke-width: 1"/> K/svg> 代码解释: Points属性定义多边形每个角的x,y坐标下面例子创建一个四边形 <?xmI vers ion=1.0 standa l one= no ? K! DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1/EN http://www.w3.org/graphics/sVg/1.1/dtd/svg11.dtd'"> Svg width=100% he i ght=100% vers i on=1.1 xmins=htTp://www.w3.org/2000/svg> < pol ygon points="220,10030,210170,250123,234 style=fill: #cccccc stroke: #000000: stroke-width: 1/> </svg> 九、SVG< po ly l ine < po lyl ine>用来创建由任意直线组成的图形复制下列代码到记事本,存成 po ly l ine1.svg,放在你的web目录下 <?xmI version=1.0 standa lone="no ? <! DOCTYPE svg PUBLIC -//3C//DTD SVG 1.1//EN http://www.w3.org/graphics/sVg/1.1/dtd/svg11.dtd> Svg width=100% he i ght=100% version=1.1 xmins="hTtp://www.w3.org/2000/svg"> < po lyl ine points=0,00,2020,2020,4040,4040,60 sty le=fill: white; stroke: red; stroke-width: 27> K/svg> 十、 SVG<path> pat>标签用来创建一条路径 M= moveto neto H= hor izontal lineto VCs vertica inet curveto smooth curveto Q= quadrat ic BeIzier curve T smooth quadrat ic BeIzier curveto A=elliptical arc Z = closepath 注意:上面所有的命令也可以表示成小写形式。大写字母表示绝对位置,小写字母表示相对位置。复制下面代码到记事本,存成path1.svg,放到你的web目录下。 <?xmI version=1.0 standa l one=no ? <! DOCTYPE Svg PUBL"-/W3C//DTD SVG 1.1//EN http://www.w3.org/graphics/svG/1.1/dtd/svg11.dtd> Svg width=100% he i ght=100% version=1.1 xmins=htTp://www.w3.org/2000/svg> path d="M250150L150350L350350z” K/svg> 上面的代码定义了一条起始自(250,150)直线到(150,350)接着直线到 (350,350)最后在(250,150)闭合结束下面的例子创建了一条落选。 <?xmI version=1.0 standa one=no ? K! DOCTYPE svg PUBLIC" -//W3C//DTD SVG 1.1//EN http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd> < svg width=100% hei ght=100% vers i on=1.1 xmins="Http://www.w3.org/2000/svg>

...展开详情

SVG Perl

试读 17P SVG语法教程指南