SVG入门 收藏

 

SVG入门2007-05-25 02:26

SVG(Scalable Vector Graphics)代表可升级矢量图象，是新一代图象格式的标准。它给Web开发人员提供了一种利用XML(Extensible Markup Language)创建静态图像和动态图像的方法，是图象技术上的一次革命。利用此技术，Web开发人员对页面进行更加精确的控制，SVG的动画片技术可 以实现从简单的直线运动到复杂的3D螺旋变形的控制.

 

SVG 有许多其他图像方法所不具有的优点，下面就是其中一些：

 

1，和其它媒介兼容，比如无线设备等。

2，可升级的服务器端解决方案。

3，文件尺寸小，方便Web页面下载。

4，无限的颜色和字体的选择。

5，图像可任意缩放。

6，可以用脚本控制与客户的交互事件。

7，方便浏览器进行高清晰的打印。

8，可使用滤镜效果。

9，基于文本的格式，可以轻松地和其它WEB技术集成。

10，内建的国际语言支持。

11，减少维护成本。

12，轻松升级。

13，广泛的多媒体兼容性。

   

     由于SVG和Flash有很多共同的特性，通常有人把它们放到一起进行比较，确实，两者都和其它标准有很 好的兼容性。事实上，SVG比Flash有一些独特的特性。SVG可以使用CSS（Cascading Style Sheets）、Script脚本和DOM（Document Object Model ），是完全公开源代码的技术，初学者完全可以从别人的现成的作品中进行学习。而Flash采用的是独有的专利技术，并不是完全开放的标准，当你在场景上单 击右键时，你看到的不是源代码。

     然而，由于某些原因，SVG还并没有象Flash那样流行，但随着时间的推移，SVG也将很快流行起来 的。Mozilla计划完全支持SVG技术，Microsoft也开始支持这种技术，（其实，IE6已经支持SVG。）Adobe GoLive5也宣布支持SVG。此外，SVG编辑器也开始在网络上风行，Jasc的WebDraw已经可以以可视化的方式创建SVG格式的图像了。 Adobe 也有生成SVG格式图象的插件。SVG的未来不但是光明的，而且将会在不久的将来在Web领域扮演重要的角色。

     目前，SVG的另一个不足之处就是，没有一个浏览器完全支持它，要浏览SVG格式的图像，需要安装Adobe SVG插件（plug-in），但目前它也不能完全支持SVG的标准。另一个缺陷就是，SVG的在线资料太少，Web开发人员很难找到可参考的资料和素材。

     下面就让我们来了解一下SVG的基本概念，SVG的特性是很多的，这里不能全部罗列出来，我们只是先初步感受一下SVG能够给Web开发人员带来什么.

 

什么是SVG?

 

     SVG是设计和编程之间的桥梁，与传统的图像制作方法不同，SVG图像是由程序代码生成的，这种语言是基于XML的，因此，它可以和W3C的其它标准无缝集成，比如DOM，CSS等。

     为了便于理解，我们可以把浏览器想象成一个空的画布，上面定义了许许多多的X，Y的坐标点，画布上的每一 个点，都可以通过数学计算公式创造出一个形体。使用数学的术语可能会使人产生恐惧感，事实上，Web开发者在创建HTML页面时一直在使用这样的数学计算 公式已经好长时间了，例如：一个CSS的层，通过设定层的top（y坐标点）和left（x坐标点）属性值，就可以定位它的位置，这就是利用数学公式来实 现。SVG就是利用类似的原理来创建图像的。

     SVG能够显示24位颜色的图像，而图像尺寸却非常的小，图像在放大或改变尺寸时不会有任何质量上的损失，更重要的是，SVG的每一个元素和元素的每一个属性都能够动态进行改变。这也是SVG最有竞争力的一面。

 

一、轻松入门（Blueidea_1.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="400" height="400">

<desc>Blueidea</desc>

<circle style="fill:blue;stroke:green;" cx="130" cy="120" r="45"/>

</svg>

-----------------------------------------------------------------------------

说明：

文件名是以.svg作为后缀名的。

第1行是xml声明，指定所遵循的xml标准的版本和文件的编码方式。

2、3行是DOCTYPE声明，指定SVG DTD所在的位置。

第4行是SVG元素，svg元素是SVG文件的根元素，所有其他的SVG元素都是他的子元素。可以使用width属性和height属性设置SVG图象的高和宽。单位象素。

第5行是desc元素，包含了一些描述性的信息。

第6行是circle元素，它的作用是画一个圆，style属性设置为"fill:blue"表示用蓝色填充这个圆，cx和cy属性用来定义圆心的x和y坐标，r属性定义圆的半径。

用浏览器可以打开这个文件，可以到http://www.adobe.com/svg/viewer/install/main.html去下 载Adobe公司的SVG Viewer浏览器插件(2.24Mb Win 98 - XP SVGView.exe 3.0 11/2001 )。

---------------------------------------------------------------------------------

 

 

二、使用颜色（Blueidea_2.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="400" height="400">

<desc>Blueidea</desc>

 

<circle style="fill:black" cx="100" cy="70" r="50"/>

<circle style="fill:blue;stroke:green;" cx="130" cy="120" r="45"/>

<circle style="fill:none;stroke:red;" cx="160" cy="70" r="50"/>

 

</svg>

--------------------------------------------------------------------------------

说明：

如果你看了第一个例子就会知道这个例子构造了三个不同的圆，第1个圆用黑色填充，线条颜色没有设定，默认是黑色。第2个圆用蓝色填充，线条是绿色。第3个圆不使用填充，线条是红色。

语法形式>>> style="fill:color;stroke:color"

---------------------------------------------------------------------------------

 

 

三、不透明性（Blueidea_3.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="400" height="400">

<desc>=Blueidea=Opacity</desc>

 

<circle style="fill:red;opacity:.5" cx="100" cy="70" r="50"/>

<circle style="fill:yellow;fill-opacity:.5" cx="130" cy="120" r="50"/>

<circle style="fill:blue;opacity:0" cx="160" cy="70" r="50"/>

 

</svg>

----------------------------------------------------------------------------

说明：

在SVG中，使用style属性指定fill-opacity,stroke-opacity和opacity的值，可以控制图象的透明度。

例如：fill-opacity表示填充颜色的透明程度。stroke-opacity表示线条颜色的透明程度。可取值的范围是从1到0；1表示完全不透明，0表示完全透明；如果图象是完全透明的(opacity=0),那么图象就看不见了。

------------------------------------------------------------------------------

 

 

四、线条（Blueidea_4.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="400" height="400">

<desc>Blueidea Strokes</desc>

 

<circle style="fill:none;stroke:red;stroke-width:5;" cx="100" cy="70" r="50"/>

<circle style="fill:none;stroke:blue;stroke-width:3;stroke-dasharray: 5 5 15 25"

cx="130" cy="180" r="100"/>

 

</svg>

----------------------------------------------------------------------------------

说明：

在SVG的style属性中，stroke控制线条的颜色，stroke-width控制线条的宽度，stroke-dasharray是用来 描述线段和空隙长度的。第1个"5"表示小线段的长度，第2个"5"表示小线段和长线段之间的长度，"15"表示长线段的长度，"25"表示长线段到短线 段之间的长度。事实上，可以给上述数字序列再添上几个数字，那么该圆的边框线段和空隙就更多了。

-----------------------------------------------------------------------------------

 

 

五、文本（Blueidea_5.svg）

---------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>

<!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 width="200" height="50">

<text x="50" y="13" style="fill: red; text-anchor: middle">

Blueidea

</text>

</svg>

---------------------------------------------------------------------------

说明：

在SVG中使用text元素定义文字。Text元素用x和y属性定义文字的位置。Text元素默认是左对齐，可以用text-anchor子属性指定文字的对齐方式，中对齐（text-anchor: middle），右对齐（text-anchor: end）

（按照XML的规则，显示中文应该是<?xml version="1.0" encoding="GB2312"?>，可在SVG中则通不过。谁知道的话请告诉我一声，谢谢。）

文字颜色的定义：可以在text元素的style属性中设置fill:color

---------------------------------------------------------------------------

 

 

六、分行显示（Blueidea_6.svg）

-------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>

<!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 width="50" height="50">

<text x="0" y="13" style="fill: red">

Line 1

<tspan x="0" dy="0.5cm">Line 2</tspan>

</text>

</svg>

-------------------------------------------------------------------------------------

说明：

在SVG中，可以使用tspan元素使文字分行显示。Tspan元素作用于对文字显示进行单独控制。Tspan元素的dy属性表示一个纵向相对位移值，他作用于区分上下两行文字间的纵向相对位移。如果将dy属性删掉，将会发现line1被line2覆盖而无法显示。

Tspan元素除了dy还有x,y,dx,rotate,textlength等属性。

-------------------------------------------------------------------------------------

 

 

七、形状（Blueidea_7.svg）

前面的例子全是画圆的，别误会SVG只能画圆哦，其实SVG可以画很多复杂的形状的。

 

创建椭圆

 

在SVG中可以使用ellipse元素创建椭圆，ellipse元素的cx和cy属性表示椭圆中心的坐标，rx和ry表示椭圆的长轴和短轴。Style属性决定椭圆的显示样式。

<ellipse cx="25" cy="25" rx="20" ry="10" style="fill:blue" />

 

创建矩形

 

在SVG中可以使用rect元素创建矩形，rect元素的x和y属性表示矩形左上角的坐标，width和height表示矩形的长和高。Style属性决定矩形的显示样式。

<rect x="10" y="10" width="20" height="10" style="fill:blue" />

 

创建圆角矩形

 

在SVG中可以使用rect元素创建圆角矩形，rect元素的x和y属性表示矩形左上角的坐标，width和height表示矩形的长和高。Style属性决定矩形的显示样式。

圆角矩形是矩形的一种特殊情形，只是又多了两个和圆角相关的内容：rx和ry属性。

<rect x="10" y="10" rx="5" ry="5" width="20" height="30" style="fill:blue" />

 

创建线条

 

在SVG中可以使用line元素创建线条，line元素的x1和y1属性表示线条的开始端的坐标，x2和y2表示线条的终点的坐标。Style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽

<line x1="10" y1="10" x2="50" y2="50" style="stroke:blue;stroke-width=5" />

 

创建折线

 

在SVG中可以使用polyline元素创建线条，polyline元素的points属性依次记录折线的起点、折点、终点的坐标，polyline元素的style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽。

< polyline points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" />

 

创建多边形

 

在SVG中可以使用polygon元素创建线条，polygon元素的points属性依次记录多边形的起点、折点、终点的坐标，polygon元素的style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽。

< polygon points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" />

 

定义路径

 

在SVG中，可以使用path元素定义路径.

<path d ="M5,5 C5,45 45,45 45,5" style="stroke:blue;stroke-width=5" />

path元素的d属性代表数据声明标签，他的值就是路径上的关键点的信息集合。在d属性值中，M代表Moveto(移动到)，M5和5表示先将 起点移动到（5,5）处，C 代表Curve（贝赛尔曲线控制），C5,45 45,45 45,5中的点（45,5）表示第2个点的位置，中间的两点（5,45），（45,45）分别代表前一个点（5,5）和后一个点(45,5)之间的曲柄点 的位置。

 

对象的调用

 

如果一个SVG对象需要被多次使用，可以首先对该对象进行声明定义。使用defs元素，该定义中必须包括ID标志。当需要使用预定义好的对象时，必须使用use元素，并确定放置对象的位置，利用xlink属性指定对象的ID标志，完成调用。

<defs>

<rect id="rect" width="20" height="15" style="fill:red" />

</defs>

<use x="10" y="10" xlink:href="#rect" />

<use x="25" y="25" xlink:href="#rect" />

下面，就让我们来看几个SVG的例子:

 

基本形状

 

和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就象HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素:

矩形<rect>

圆形<circle>

椭圆<ellipse>

直线<line>

折线<polyline>

多边形<polygon>

描绘路径<path>

<rect>

 

<rect>标记允许你创建矩形或它的变体，比如正方形，圆角矩形等，下面就让我以一个例子来看看：

1. <?xml version="1.0" standalone="no"?>

2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

3. <svg width="300" height="300">

4. <rect x="80" y="53" width="189" height="52"

style="fill:rgb(39，44，231); stroke:rgb(0，0，128); stroke-width:1"/>

5. </svg>

上面的代码的第4行定义了一个矩形，以一个<rect>标记开始，定义了矩形的各个属性，x属性定义了矩形距浏览器左边的位置，y 属性定义了矩形距浏览器上边的位置，换个角度考虑，就相当于html中元素的left和top属性，width和height属性定义了矩形的宽度和高 度，style属性允许我们定义SVG推荐标准支持的CSS样式属性，有许多CSS属性是专门针对SVG的，上面的例子中，fill属性定义了长方形的填 充颜色，这里采用的是rgb的格式，SVG也支持颜色名和16进制的颜色格式.比如:fill:red或fill:#ff0000，stroke属性定义 边框线，SVG中，如果不定义，边框线没有任何宽度，换句话说，SVG默认边框线宽度为0，对所有的SVG的形状都是这样的。如果需要定义边框线的话，采 用这样的确语法格式:stroke:rgb(0，0，128)定义颜色，stroke-width:1定义宽度，我门还可以改变填充颜色的透明度，可以这 样写:fill-opacity: 0.1，透明度范围是从0到1，我们也可以定义整个元素的透明度，opacity:0.5，该透明度对填充和边框线都有效，也可以单独定义边框线的透明 度:stroke-opacity:0.8。定义圆角矩形，使用rx，ry属性定义圆角的半径:rx="20" ry="20"

例如：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="300" height="300">

<rect x="0" y="0" rx="20" ry="20"

width="289" height="252"

style="fill:olive; stroke:purple; stroke-width:5"/>

</svg>

 

 

<line>

 

<line>通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线，语法如下:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="300" height="300">

<line x1="127" y1="65" x2="127" y2="200"

style="stroke:rgb(0，0，0);stroke-width:2"/>

</svg>

要想得到很细的线，可以指定stroke-width为大于0小于1的数值。

 

<circle>

 

SVG中，要定义一个圆，只需要指顶圆心的坐标、半径即可，也可以使用样式单属性定义外观的样式：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="300" height="400">

<circle cx="143" cy="163" r="84"

style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>

</svg>

 

<ellipse>

 

定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="300" height="400">

<ellipse cx="160" cy="163" rx="101" ry="81"

style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/>

</svg>

 

<polygon>

 

这个标记用来指定连续的点的坐标来，定义多边形。语法如下：

 

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%">

<polygon points="223.5，123.034 276，213.966 171，213.966"

style="fill:rgb(126，14，83);stroke:rgb(0，0，128);stroke-width:1"/>

</svg>

 

在SVG中，允许使用浮点数来达到精确控制，这和以前的HTML不一样。

 

<polyline>

 

这个标记通过指定各个点的坐标，来定义一条折线，格式如下：

 

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%">

<polyline points="100，200 100，20 10，200 100，20"

style="stroke:rgb(64，64，64);stroke-width:1"/>

</svg>

 

<path>

 

<path>标记是SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的，

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%">

<path d="M10 20 L110 20 L110 120 L10 120"

style="fill:rgb(0，0，153);fill-opacity:0.5;stroke:rgb(0，0，153);stroke-width:4"/>

</svg>

<path>标记的d属性用来描述下面要画的是多类型的形状，M10 20表示画笔移动到点10，20，L110 20表示从当前点画一条线到坐标110，20等，由于path标记采用的格式很复杂，因此，可以画出很复杂的形状，下面的语句在浏览器上画一个螺旋线：

<path d="M156 334 C153.239 334 151 334 151 334 C151

339.523 153.239 344 156 344 C164.284 344 171 339.523 171 334 C171 322.954

164.284 314 156 314 C142.193 314 131 322.954 131 334 C131 350.568 142.193

364 156 364 C175.33 364 191 350.568 191 334 C191 311.909 175.33 294 156

294 C131.147 294 111 311.909 111 334 C111 361.614 131.147 384 156 384

C186.375 384 211 361.614 211 334 C211 300.863 186.375 274 156 274"

style="fill:none;stroke:darkgreen;;stroke-width:2"/>

下面是path标记的d属性使用的命令，注意：大写表示绝对位置，小写表示相对位置：

 

M = 移动

L = 画直线

H = 水平画线

V = 垂直画线

C = 画曲线

S = 画平滑曲线

Q = 画贝塞尔曲线

T = 画平滑贝塞尔曲线

A = 画圆弧

Z = 关闭路径的描绘

 

由于描绘路径比较复杂，建议使用画图工具包来生成，比如：Jasc公司的WebDraw，但要动态控制图像，你必须清楚你的每句代码都是做什么 的。目前支持SVG的编辑器也开始出现，你可以利用XML SPY来创作您的SVG图象了，SWF格式的Flash也可以转换成SVG格式（http://www.ep.cs.nott.ac.uk /projects/SVG/flash2svg/），Bitmap转换成SVG(http: //padc23.padc.mmpc.is.tsukuba.ac.jp/member/morik/fdssvg/)，CorelDraw的SVG滤 镜下载（http://venus.corel.com/nasapps/DrawSVGDownload/index.html），Adobe Illustrator 10可以直接生成SVG格式的图象文件。

到目前为止，我们已经可以做出比较复杂的图像了，但还不够生动，要做出更加复杂的图象，我们也可以在SVG里使用滤镜效果，就象在Adobe PhotoShop和Micromidea FireWorks里的那样。

 

 

Adobe公司的SVG网页中，有更多相关的资料：

 

     普通效果：

    http://www.adobe.com/svg/dynamic/transformations2.html

 

     无JS干预效果：

    http://www.adobe.com/svg/dynamic/declarative.html

 

     JS干预效果：

    http://www.adobe.com/svg/dynamic/javascript.html

 

     鼠标事件效果：

    http://www.adobe.com/svg/dynamic/mouseevents.html

 

     键盘事件效果：

    http://www.adobe.com/svg/dynamic/keyboardevents.html

 

 

     滤镜特效1、2

    http://www.adobe.com/svg/basics/filtereffects.html

    http://www.adobe.com/svg/basics/filtereffects2.html

 

要看到更多的SVG的例子，访问 http://lucky.myrice.com

http://down.xml.org.cn/xml/svg/SVGTutorial.rar

http://down.xml.org.cn/xml/svg/SVGProgrammingGuide.rar

http://down.xml.org.cn/xml/svg/F ... .to.Source.Code.rar

http://down.xml.org.cn/xml/svg/F ... rce.CodeSamples.zip

 

两个SVG的`DTD

 

做SVG做WEBGIS``

 

 

 

引言

 

SVG（Scalable Vector Graphics）是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，是一种全新的矢量图形规范。 SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)。 SVG的绘图可以通过动态和交互式方式进行，在实际操作中，则是以嵌入方式或脚本方式来实现的。SVG不仅提供超链接功能，还定义了丰富的事件。由于 SVG支持脚本语言（script），可以通过Script编程，访问SVG DOM的元素和属性，即可响应特定的事件，从而提高了SVG的动态和交互性能。 SVG实现了图形、图象和文字的有机统一。 SVG除了支持HTML中常用的标记，如文本、图象、链接、交互性、CSS的使用、脚本（Script）外，还提供了大量针对图形、图象、动画的特定标 记。这就为实现GIS提供了可能。

 

作者根据实际工作需要，在Web浏览器中采用SVG及相关技术实现了Web的GIS管理系统(以下简称WebGIS)，取得了很好的效果。此系 统包括服务端及客户端的设计，服务器端出要处理数据的存储及数据的动态装载，客户端主要完成SVG数据的显示及交互。本文主要对基于SVG的WebGIS 的客户端实现的一些基本知识及实现技术作一个简单介绍。

 

基础知识

 

SVG浏览插件

 

要实现SVG图形的显示，必须要在客户端安装SVG浏览器，Adobe开发的SVG Viewer功能强大，显示效果好，是网络上使用最多的，其最新的版本是3.0。可以到Adobe的网站（http://www.adobe.com /svg/viewer/install/main.html）上去下载，为了保证中文能正确显示，请下载简体中文版本。下载后安装程序，第一次使用时回 弹出用户许可信息，点击"接受"即可。

 

在网页中嵌入SVG

 

将实现基于浏览器的GIS系统，需要将SVG图形对象嵌入到网页中，使用如下HTML代码来实现：

 

 

<embed width="640" height="560" type="image/svg-xml" id="svgmapctrl"

pluginspage="http://www.adobe.com/svg/viewer/install/" src="default.svg" ></embed>

 

 

 

其中embed标签指定为一个嵌入的对象，width,height分别指定该对象的宽度、高度，type指定类型为image/svg- xml ,src指定为svg数据文件的URL地址，指定这样的标签并在浏览器中打开，浏览器便回调用SVG Viewer在指定区域进行显示。此处，src指定的是一个svg文件，在GIS系统中，要求根据不同的请求获取不同的数据，则可以将其改为动态的 url，如服务端的Java Servlet，由服务端动态生成。需要注意的是,SVG目前不支持GB编码，在使用中文字符时，请使用UTF-8编码。

 

SVG图形对象简介

 

SVG提供了丰富的图形对象，包括直线（line）、路径(path)、圆(circle)、图标(symbol)文字(text)、图像 (image)等，满足了GIS系统的需要。这些图形对象可以通过设置不同的属性、显示样式来达到不同的显示效果。对象在SVG文件中以XML标签的形式 存在，而对象属性以标签的属性来存取，可以通过访问SVG的DOM对象的方法来方便的存取这些对象及属性。同时SVG中还提供了组的管理 (<g>标签),定义(defs)及引用等功能。这些特征在GIS中得到了广泛的应用。

 

SVG的事件简介

 

SVG提供了丰富的消息触发及事件响应函数，获取用户消息。如在地图上移动、点击鼠标等。事件的相应可以定义到整个文档对象中，也可以定义在单 个图形对象上。如要给某个路径(path)定义鼠标一定事件，可以这样<path onmousemove="mouseMoved(evt)" …../>, onmousemove指定事件触发的条件（即鼠标在path上移动时），mouseMoved为要触发的响应函数，evt表示事件本身，可以通过evt 获取与当前事件相关的信息，用户可以在script中定义响应函数，进行相应的处理。同样，SVG也提供丰富的状态事件，如数据装载完毕，就可以触发 onload事件，作一些初始化的处理。

 

功能实现

 

地图的交互及控制

 

在浏览器中打开SVG文件时，SVG图形作为浏览器的一个嵌入对象出现，可以很方便的通过script函数来获取SVG图形对象及其内部的图形属性。通过获取这些对象和属性，就可以很方便地实现交互功能。

 

GIS系统最基本的功能是地图控制，SVG Viewer本身提供图形的缩放功能，但要通过操作鼠标时按指定的功能键才能实现，不适合GIS功能的需要，在WebGIS系统中将其屏蔽。但由于SVG 提供了丰富的消息触发及事件响应函数，通过捕捉这些消息，来实现自定义的地图控制功能。一个放大地图的实现流程是：用户点击地图，触发 onmousedown事件，调用消息响应函数，在消息响应函数中将地图的变换矩阵以当前点击的点为中心放大1.1倍，更新显示图形。消息响应的函数如 下：

 

 

Function zoom(evt, scale)

{ // scale = 1.1;表示放大1.1倍

point = new GDPoint();

point.x = evt.clientX;

point.y = evt.clientY; //point为当前点击的坐标点 为屏幕坐标

absPoint = pointInvert(point);//转换为绝对最表

scale = curTransform.scale*scale; //设置当前的缩放系数

curTransform.scale = scale;

point1 = pointApply(absPoint);//绝对坐标应用当前的变换系数

curTransform.x += point.x-point1.x;

curTransform.y += point.y-point1.y;//缩放中心平移到当前点击的位置

matrix= trans2String(curTransform);//生成新的变换矩阵

maproot.setAttribute("transform",matrix);//应用新的变换矩阵

}

 

 

 

其他的如地图缩小、全图显示、区域放大、局部定位等功能与之类似，这里就不一一作介绍。

 

图层管理

 

SVG采用基于XML的DOM文档管理结构，很方便实现层次管理，其组<g>对象就可以将其下面的所有图形管理起来。节点中的 childNodes属性可以获取所有的子节点的集合，getElementsByTagName()方法可以获取某种类型对象的列表，如要获取某组 （g）下的所有路径(path)对象的集合，就可以调用getElementsByTagName("path")。 作者通过采用组对象来实现图层管理功能，不同图层的对象包含在不同的组中。通过设置组的属性，就可以实现如可见性、颜色、透明度等设置以及选中、删除所有 对象等操作。SVG中的对象的样式属性具有继承性，如果下一级没有某样式属性，则直接使用其上一级的属性，以此类推，直到顶级为止。如：对某层设置某个显 示透明度，则其下级元素显示时，均采用该透明度，除非其下级元素指定了透明度属性。

 

下面的图显示GIS系统中的图层控制界面。

 

 

 

 

 

图标管理

 

图标表示的是信息点的信息，在GIS系统中广泛使用图标来标志信息点，其特点是图标引用相同的预定义的图形组。增加新的图标只是在不同的位置增 加一个引用而已。在不增加实际的绘图数据。减少了数据量；同时，如果要修改某类信息的显示图标，只要修改预定义的图标即可，方便了管理。在WebGIS系 统中定义了很多类型的图标。下图表示用一个圆和一个路径对象定义的图标,其名称为symbol_1,并定义在defs标签内，供图标对象引用：

 

 

<defs>

<g id="symbol_1" type="default" style="&_symbol;">

<circle cx="0" cy="0" r="10" />

<path d="M-7.1 7.1,-10 0,-7.1 -7.1,0 -10,7.1 -7.1z" style="fill:#0000ff;fill-opacity:0.6" />

</g>

…

</defs>

 

 

 

下图为图标的实例，这两个图标引用上面定义的symbo_1的图标：图标在地图上的实际位置为transform指定的位置分别是(200,100),(200,200)。

 

 

<use id="icon:1" type="A" transform="translate(200,100)" xlink:href="#symbol_1" />

<use id="icon:2" type="B" transform="translate(200,200)" xlink:href="#symbol_1" />

 

 

 

如果要增加图标，只要添加新的引用(use)对象即可。这些对象可以有自己的属性，表示不同的信息点，但其显示的形状是预定义的，如果修改了预定义的形状，这些图标的显示结果同样改变。下图为在WebGIS中定义的几种图标及显示效果(蓝色的为图标)。

 

 

 

 

 

地图属性的定义

 

SVG图形数据本身只包含用来实现矢量图形显示的信息，如坐标点、变换矩阵、显示样式等信息，不能满足GIS系统的需要。但由于SVG是基于 XML格式的，除了使用其内置的属性外，可以对其属性进行任意扩充，以实现自定义的功能。在SVG图形中，对象的属性id是用来标志唯一对象的编号，可以 通过SVG文档对象的getElementById()函数来获取指定的对象。WebGIS采用id好作为图形内在的标示，而自定义其他的属性如名称 (name),提示信息(tip)等来存储其GIS属性。获取或赋值这些属性的方法是调用getAttribute及setAttribute函数。如在 WebGIS中一个路径是这么定义的。

 

<path id="ROAD:101" Name="解放大道" Tip=" 解放大道（东）" d="<M……"/>

 

那么通过ID "ROAD:101" 获取路径对象后，就可以获取其属性Name及Tip的信息，执行显示提示信息等功能。

 

总结

 

本文对用SVG技术实现基于Web的GIS的关键技术做了简单的介绍，通过对SVG技术的把握和应用，作者成功地开发了WebGIS系统，说明 SVG技术完全能胜任某些行业GIS应用的需要，从长远来看，SVG技术代表网络矢量化图形的发展方向，必将在包括 GIS在内的各个方面得到广泛应用。