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>

...展开详情
试读 17P SVG语法教程指南
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
dunqiu123 虽然我是直接使用SVG,不是去开发SVG图片,还是点个赞。
2016-02-29
回复
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
  • 签到新秀

关注 私信
上传资源赚钱or赚积分
最新推荐
SVG语法教程指南 50积分/C币 立即下载
1/17
SVG语法教程指南第1页
SVG语法教程指南第2页
SVG语法教程指南第3页
SVG语法教程指南第4页

试读结束, 可继续读2页

50积分/C币 立即下载 >