神马文学网SVG的简单实例介绍
来源：百度文库 编辑：神马文学网 时间：2024/04/20 18:13:16
SVG的简单实例介绍
Written by ldabs
2006-Jun-27
来源：http://dslab.ee.ncku.edu.tw
* SVG将在不久的未来成为网页向量图形（vector graphic）及动画（animation）的公认标准。
* SVG 本身可以纯粹被视为图形及动画的格式，它也可以与 XML、JavaScript、SMIL 以及 HTML 等相结合而产生丰富多样的应用。
* SVG 就是用来解决网页上图形及动画呈现的新技术。
* W3 Consortium 最近才拟定SVG 的建议参考标准 ，也就是说这项标准的制定即将完成，很快就会内建在网页瀏览器及 XML 瀏览器上了。
SVG提供了三种图形物件：第一种就是向量图形(长方形、圆形、三角形、多边形…等)、第二种是影像(也就是点阵图形)、第三种是文字(可对文字做特效且有搜寻的能力)。并有档案小、动画、样式功能以及和使用者互动的能力。
透过这三种物件的交替使用，就可以绘製生动漂亮的图形了。接下来就来说明有关于SVG的一些标籤语法。
网站连结：http://www.w3.org/Graphics/SVG/Overview.htm8
要完完整整的介绍SVG的写作方法与技巧，可能会花费掉太多的篇幅，而学习最快的方式就是范例，希望能够藉由范例的展示，从中了解SVG的奥妙以及SVG所能够达到的功能，进而喜欢上SVG。
当您安装Adobe SVG Tools让您的瀏览器也能看SVG格式之后，可以先连上Adobe的SVG测试网页 ，看看是否真的可以使用了，如您看到如上面标题旁的时鐘图，就表示您的瀏览器可以观看SVG格式了。
参考 Adobe 更详尽的SVG网站 ，里面提供了 plug-in、范例以及一些其他的好东西。
范例 1
这一个范例示范了绘製直线的SVG语法。范例中，在X座标100,300,500,700,900共绘製五条长度200 pixel的直线。
直线范例
范例 1瀏览结果
图 1 范例 1 执行结果
范例 2
这一个范例示范了如何绘製圆形的SVG语法。范例中，在座标(100,350)、(300,350) 、(700,350)共绘製三个红色绿色、蓝色的圆形图形。
圆形范例
范例 2 瀏览结果
范例 3
解释：
1到4行：应该不需做多大的解释，XHTML1.1 + MathML2.0 + SVG1.1 所用的文件型态宣告。
5行：唯一需注意的是 xml:lang 表示这份文件是给 zh-TW 地区使用的。
9行：会把 rect1 所表示的方块涂成红色。
10行：当滑鼠移到 rect1 方块上方时，会涂上10像素大小的蓝色边框。
11行：把text1 所表示的文字涂上绿色，并使得文字的大小为 16 点。
15到24行：是文件物件模型的用法，首先为 rect1 所表示的方块登记一个事件：当点选 rect1 方块时，执行Go()函数。而函数的功能是把方块从(20,20)移到(50,100)。
29行：svg 元素代表这是可变式向量图形，它的名称空间为 http://www.w3.org/2000/svg，这是一定要写上去的并且指定可变式向量图形的版本。
30行：在位置(20,20)处画上宽100高100的正方形。
31行：在位置(40,50)处画上文字"点我一下"并使得文字旋转15度。
看起来就像这样：
(图：当在方块的上方按一下时，方块即会从(20,20)移到(50,100))。
Written by ldabs
2006-Jun-27
来源：http://dslab.ee.ncku.edu.tw
* SVG将在不久的未来成为网页向量图形（vector graphic）及动画（animation）的公认标准。
* SVG 本身可以纯粹被视为图形及动画的格式，它也可以与 XML、JavaScript、SMIL 以及 HTML 等相结合而产生丰富多样的应用。
* SVG 就是用来解决网页上图形及动画呈现的新技术。
* W3 Consortium 最近才拟定SVG 的建议参考标准 ，也就是说这项标准的制定即将完成，很快就会内建在网页瀏览器及 XML 瀏览器上了。
SVG提供了三种图形物件：第一种就是向量图形(长方形、圆形、三角形、多边形…等)、第二种是影像(也就是点阵图形)、第三种是文字(可对文字做特效且有搜寻的能力)。并有档案小、动画、样式功能以及和使用者互动的能力。
透过这三种物件的交替使用，就可以绘製生动漂亮的图形了。接下来就来说明有关于SVG的一些标籤语法。
网站连结：http://www.w3.org/Graphics/SVG/Overview.htm8
要完完整整的介绍SVG的写作方法与技巧，可能会花费掉太多的篇幅，而学习最快的方式就是范例，希望能够藉由范例的展示，从中了解SVG的奥妙以及SVG所能够达到的功能，进而喜欢上SVG。
当您安装Adobe SVG Tools让您的瀏览器也能看SVG格式之后，可以先连上Adobe的SVG测试网页 ，看看是否真的可以使用了，如您看到如上面标题旁的时鐘图，就表示您的瀏览器可以观看SVG格式了。
参考 Adobe 更详尽的SVG网站 ，里面提供了 plug-in、范例以及一些其他的好东西。
范例 1
这一个范例示范了绘製直线的SVG语法。范例中，在X座标100,300,500,700,900共绘製五条长度200 pixel的直线。
直线范例
范例 1瀏览结果
图 1 范例 1 执行结果
范例 2
这一个范例示范了如何绘製圆形的SVG语法。范例中，在座标(100,350)、(300,350) 、(700,350)共绘製三个红色绿色、蓝色的圆形图形。
圆形范例
范例 2 瀏览结果
范例 3
解释：
1到4行：应该不需做多大的解释，XHTML1.1 + MathML2.0 + SVG1.1 所用的文件型态宣告。
5行：唯一需注意的是 xml:lang 表示这份文件是给 zh-TW 地区使用的。
9行：会把 rect1 所表示的方块涂成红色。
10行：当滑鼠移到 rect1 方块上方时，会涂上10像素大小的蓝色边框。
11行：把text1 所表示的文字涂上绿色，并使得文字的大小为 16 点。
15到24行：是文件物件模型的用法，首先为 rect1 所表示的方块登记一个事件：当点选 rect1 方块时，执行Go()函数。而函数的功能是把方块从(20,20)移到(50,100)。
29行：svg 元素代表这是可变式向量图形，它的名称空间为 http://www.w3.org/2000/svg，这是一定要写上去的并且指定可变式向量图形的版本。
30行：在位置(20,20)处画上宽100高100的正方形。
31行：在位置(40,50)处画上文字"点我一下"并使得文字旋转15度。
看起来就像这样：
(图：当在方块的上方按一下时，方块即会从(20,20)移到(50,100))。
SVG的简单实例介绍
SVG的简单实例介绍
SVG入门,SVG实例,SVG教程与设计,SVG应用
RMI最简单的一个实例
RMI最简单的一个实例
cpu寄存器的简单介绍
简单介绍看盘的方法
简单介绍看盘的方法
几种开源license的简单介绍
TSI发动机的简单介绍
简单介绍看盘的方法
数码相机结构的简单介绍
简单介绍看盘的方法
简单介绍看盘的方法
利用SVG建立WebGIS的优越性
几种开源Portal的简单介绍分析
linux下Epoll的简单介绍
Nucleus PLUS嵌入式操作系统的简单介绍
几种开源Portal的简单介绍分析
财务报表的种类以及简单介绍
系统工作机理的简单介绍
[看盘技巧]简单介绍看盘的方法
介绍一些简单的打印机维修方法
介绍一种简单的选基方法