SVG的简单实例介绍

引自http://www.chinasvg.com/svg/about-svg/svg-on-the-simple-examples.html

文章通过SVG实例分析SVG代码的语法、规则以及SVG设计相关信息。

• SVG将在不久的未来成为网页向量图形（vector graphic）及动画（animation）的公认标准。
• SVG 本身可以纯粹被视为图形及动画的格式，它也可以与 XML、JavaScript、SMIL 以及 HTML 等相结合而产生丰富多样的应用。
• SVG 就是用来解决网页上图形及动画表现的新技术。
• W3 Consortium最近才拟定SVG的建议参考标准，也就是说这项标准的制定即将完成，很快就会内建在网页浏览器及XML浏览器上了。

　　SVG提供了三种图形物件：第一种就是向量图形(长方形、圆形、三角形、多边形...等)、第二种是影像(也就是点阵图形)、第三种是文字(可对文字做特效且有搜寻的能力)。并有档案小、动画、样式功能以及和使用者互动的能力。
　　透过这三种物件的交替使用，就可以绘制生动漂亮的图形了。接下来就来说明有关于SVG的一些标签语法。
　　要完完整整的介绍SVG的写作方法与技巧，可能会花费掉太多的篇幅，而学习最快的方式就是实例，希望能够借由实例的展示，从中了解SVG的奥妙以及SVG所能够达到的功能，进而喜欢上SVG。
　　当你安装Adobe SVG Viewer让你的浏览器也能看SVG格式之后，可以先连上 SVG浏览器(Adobe SVG Viewer)指南 测试SVG预览功能是否完整，看看是否真的可以使用了，如你看到测试一的中国五星红旗，就表示你的浏览器可以观看SVG格式了，如果你还看到了测试二的动态变化效果，表示你的浏览器完全支持SVG。

　　参考w3.org SVG 及SVG中国 获得更详尽的SVG消息，网站提供了SVG浏览插件、实例、教程、SVG运用以及一些其他的好东西。

实例1 直线实例

　　这一个实例示范了绘制直线的SVG语法。实例中，在X座标100,300,500,700,900共绘制五条长度200pixel的直线。

<?xml version="1.0" standalone="no"?>
<svg width="15cm" height="5cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>直线实例</desc>
<line x1="100" y1="100" x2="100" y2="300"/>
<line x1="300" y1="100" x2="300" y2="300"/>
<line x1="500" y1="100" x2="500" y2="300"/>
<line x1="700" y1="100" x2="700" y2="300"/>
<line x1="900" y1="100" x2="900" y2="300"/>
</svg>

　　实例1 浏览效果

实例2 圆形实例

　　这一个实例示范了如何绘制圆形的SVG语法。实例中，在座标(100,350)、(300,350)、(700,350)共绘制三个红色绿色、蓝色的圆形图形。

<?xml version="1.0" standalone="no"?>
<svg width="15cm" height="10cm" viewBox="0 0 1500 1000"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>圆形实例</desc>
<circle cx="100" cy="350" r="100"
fill="red" stroke="blue" stroke-width="5" />
<circle cx="300" cy="350" r="200"
fill="green" stroke="blue" stroke-width="5" />
<circle cx="700" cy="350" r="300"
fill="blue" stroke="blue" stroke-width="5" />
</svg>

实例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)。

(THE END)