页面 2 总共 13
定义物件,例如文本物件和图形物件,在一个SVG图像中是很重要的。作为一个SVG创作者,你需要手写入许多物件的代码,当然也可以通过一些程序来自动 生成一些物件,但是你最好能熟练掌握SVG物件定义格式。举个例子,你可以使用Adobe Illustrator 9.0来产生复杂的图像并以SVG文档格式输出,可是在你考虑动态效果和交互性时,你必须很清楚的了解物件的定义,以便对物件进行一些控制。所以掌握物件 定义格式就像制作网页时掌握html标签(元素)一样。 让我们来看些典型的SVG源码。作为XML的一种应用,SVG文档的书写 更像使用html语言,它使用的是一些代表开始和结束的标签(元素),以及嵌套标签。每一个SVG文件都包含有最外层的(svg)标签,类似于html文 件中的(html)。因此,SVG文件可以作为XML文件的一部分被植入或单独的作为一个图像文件。下面的代码是一个比较通常的独立SVG文件的头部标 识:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="5.5in" height=".5in">
...
</svg>
第一行建立了"本文件基于XML(版本1.0)"的信息。<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="5.5in" height=".5in">
...
</svg>
第二行提供了文件定义类型(DTD)的参考信息。文件定义类型(DTD)是一套用于定义元素,元素属性和制定如何形成文件的标准规则。
第三行的(SVG)表示SVG文件的开始,这里面可以添加三种基本的物件:文本,图形和路径。物件的定义都是很直接的,例如下面的描述:
<svg xml:space="preserve" width="2.5in" height=".5in">
<text style="fill:blue;" y="15">blueknight</text>
</svg>
产生下面的效果:<text style="fill:blue;" y="15">blueknight</text>
</svg>
我们看到文本显示为2.5英寸宽,0.5英寸高的图像。文字净高为15像素。
下面的例子产生一个红色的直角矩形。
<svg xml:space="preserve" width="3in" height="1in">
<rect style="fill:yellow;" width="300" height="100"/>
</svg>
<rect style="fill:yellow;" width="300" height="100"/>
</svg>
路径使用下面的属性来描述:
- "moveto" 设置新的坐标点
- "lineto" 画一条直线
- "curveto" 使用贝赛尔函数画制曲线
- "arc" 画椭圆和圆
- "closepath" 闭合路径
<svg xml:space="preserve" width="3.7in" height="1.5in">
<path d="M 50 10 L 350 70 L 100 120 z"/>
</svg>
<path d="M 50 10 L 350 70 L 100 120 z"/>
</svg>
注意:这里的x,y轴坐标是隐含的,它被包含在M,L等数据中,直接由浏览器解析获得。
你已经看见了利用SVG文件格式定义出的基本图形所占用的文件尺寸是多么小了,而且文件的结构也如此简单。SVG浏览器就是用这样的办法区别出大量的物件,然后组合绘制出图像。
