转载：SVG文档语法结构

SVG文档语法结构

2011-04-25 23:18 2546人阅读 评论(0) 收藏 举报

文档图形transformationurlxmlpath

SVG 语法结构说明
文档说明
版本
日期
作者
说明
1.0
2006.1.29
很少想起你
第 1 页 共 23 页
SVG 语法结构说明
SVG语法结构
一、SVG文档结构格式（为了方便说明，在文中加入标号和冒号；为了方便阅读，加了超链接）：
1: <?xml version=“1.0” encoding=“UTF-8” standalone=“no”?>
2: <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
3: <svg width=“1000” height=“400”viewBox=“0 0 1000 400”
Version=“1.1” xmlns=“http://www.w3.org/2000/svg”>
4: <title>此标注相当于HTML中的title标注</title>
5: <desc>SVG文件内容描述，类似文件功能注解，这部分内容不会出现在以后显示的画面中</desc>
<defs>
预定义可重用部件。并给它们指定以后可在图像主体中调用的标识。在图像主体部分通过用<use />
标注引用预定义项的元素将它们链接到文档。
</defs>
6: <defs>
<style type="text/css"> <![CDATA[
circle {fill:none; stroke:#00C; stroke-width:2px;}
#abc123 { fill: #00C; opacity: 0.5; }
.xyz { font-family: "Courier New", Courier, monospace; font-size: 20px; font-weight: bold; fill: #F00; }
.asd { fill:none; stroke-width:1; stroke:black; stroke-opacity:1; }
]]>
</style>
7: <script type=“text/javascript” Xlink:href=“uri”> <!-- 引用外部脚本 -->
<script type=“text/javascript”> <![CDATA[
<!-- 内嵌脚本 -->
]]>
</script>
</defs>
8: <defs>
<symbol id="c1">
<circle cx="25" cy="25" r="25" />
</symbol>
</defs>
9: <defs>
<symbol id="2c1">
<use xlink:href="#c1" x="20" y="50" />
<use xlink:href="#c1" x="20" y="85" />
</symbol>
</defs>
10: <defs>
<symbol id="3c1" viewBox="0 0 500 200">
<use xlink:href="#c1" x="80" y="50" />
第 2 页 共 23 页
SVG 语法结构说明
<use xlink:href="#c1" x="65" y="85" />
<use xlink:href="#c1" x="95" y="85" />
</symbol>
</defs>
11: <defs>
<rect id="abc123" x="50" y="150" width="150" height="75"/>
<rect id="rect1" x="200" y="150" width="60" height="90" />
<line id="lineation1" x1="20" y1="50" x2="250" y2="50" class="asd" stroke-dasharray="5 5 5 5" />
<line id="lineation2" x1="50" y1="70" x2="350" y2="70" class="asd" stroke-dasharray="1 1 1 1" />
<line id="lineation3" x1="50" y1="90" x2="250" y2="90" class="asd" stroke-dasharray="4 3 1 4" />
<line id="lineation4" x1="50" y1="110" x2="250" y2="110" class="asd" stroke-dasharray="5 3 1 2 1 3" />
</defs>
12: <defs>
<symbol id="专用变压器">
<use xlink:href="#2c1" x="120" y="50" />
<use xlink:href="#rect1" x="120" y="55" />
</symbol>
</defs>
13: <defs>
<symbol id="变压器组">
<use xlink:href="#3c1" x="200" y="50"/>
</symbol>
</defs>
14: <defs>
<marker id="arrow" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth" markerWidth="3" markerHeight="10" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black" stroke-width="2" />
</marker>
</defs>
<defs>
<path id=“wavyPath” d=“M75,250 c25,-75 50,50 100,0 s50,-5 150,50” />
</defs>
<desc>这里开始是整个SVG文件的重心，向量图形、图像、文字、动画等内容都应包含置于此。</desc>
15: <g id=“g” name=“图层管理”>
<g id=“g1” name=“一次图标层（设备层）” visibility =“visibility”>
16: <use xlink:href="#c1" x="50" y="100" />
第 3 页 共 23 页
SVG 语法结构说明
<use xlink:href="#c1" x="100" y="100" />
17: <use xlink:href="#lineation1" x1="20" y1="50" x2="250" y2="50" transform="scale(2)"/>
<use xlink:href="#lineation2" x1="20" y1="70" x2="250" y2="70" />
<use xlink:href="#lineation3" x1="20" y1="90" x2="400" y2="90" />
<use xlink:href="#lineation4" x1="20" y1="110" x2="450" y2="110" />
<use xlink:href="#abc123" x="50" y="150" />
<use xlink:href="#专用变压器" x="160" y="70" />
<use xlink:href="#变压器组" x="260" y="70" />
18: <circle cx="143" cy="163" r="84" style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>
. <ellipse cx="160" cy="163" rx="101" ry="81" style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/>
. <rect x="80" y="53" width="189" height="52" style="fill:rgb(39，44，231); stroke:rgb(0，0，128); stroke-width:1"/>
. <line x1="127" y1="65" x2="127" y2="200" style="stroke:rgb(0，0，0);stroke-width:2"/>
. <polyline points="100，200 100，20 10，200 100，20" style="stroke:rgb(64，64，64);stroke-width:1"/>
. <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"/>
23: <path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50" stroke="purple" stroke-width="5" fill="none" marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
</g>
<g id=“g2” name=“一次文字层（设备名、属性层）”>
24: <text x=“100” y=“120” stroke=“black” stroke-width=“.5” >专用变压器</text>
<text x=“150” y=“200” stroke=“black” stroke-width=“.5” >变压器组</text>
<text x="50" y="120" stroke-width="2" stroke="green" transform="scale(2) translate(-25 -60)">
让我们荡起双桨
</text>
25: <text x=“20” y=“100” font-size=“30”>显示属性
<tspan fill=“rgb(255,0,0)”>ID:</tspan>
26: <tspan fill=“rgb(0,255,0)”class=“abbr”>GroupID:</tspan>
<tspan fill=“rgb(0,0,255)”>Remark:</tspan>
</text>
27: <text x=“20” y=“250” font-size=“20”>
<textPath xlink:href=“#wavyPath”>
Text travels along any path that you define for it!</textPath>
</text>
</g>
<g id=“g3” name=“一次连线层”>
第 4 页 共 23 页
SVG 语法结构说明
</g>
</g>
</svg>
第一行：从本质上来说，SVG 文档是 XML 文档。这就是说 SVG 文档有某些基本属性。所以文档应该以 XML 声明 <?xml version="1.0"?> 开始。
version属性表示XML的版本，因为解析器对不同的版本的解析肯定会有区别，尽管目前版本只有1.0版本，但在声明中必须指定version
属性。
standalone属性规定本svg文件是否是独立的，如果将其设置为”yes”,则表示该文档没有依赖外面的任何文件
而可以独立存在，即不需要DTD文件来验证其中的标识是否有效，也不需要XSL、CSS文件来控制其显示外观；将standalone属性设置为”no”时，则表示该文档依赖于外面的某个文件，例如依赖于某个DTD文件或XSL、CSS文件。standalone属性的默认值是”yes”。
encoding由于可以采用不同的字符编码集来书写一个字符内容完全相同的XML文档，所以，XML软件工具（包括分析器）就需要知道该XML文档所使用的字符编码方式。这可以通过在XML文档声明中指定encoding属性来说明。
第二行：指定外部的DTD。XML文档通过使用DOCTYPE声明语句（文档类型定义语句）来指明它所遵循的DTD文件。DOCTYPE声明语句紧跟在XML文档
声明语句后面，有两种格式：
（1）<!DOCTYPE 文档类型名称 SYSTEM “DTD文件的URL”>
（2）<!DOCTYPE 文档类型名称 PUBLIC “DTD名称” “DTD文件的URL”>
各部分的意义和作用如下：
文档类型名称可以由XML文档编写者自己定义，一个通用的习惯是使用XML文档的根元素名称来作为文档类型名称。
关键字SYSTEM表明XML文件所遵循的是一个本地或组织内部所编写和使用的DTD文件。
关键字PUBLIC表明该XML文件所遵循的是一个由权威机构制定的、公开提供给特定行业或公众使用的DTD文件，而不是某个组织内部的规范文件。
“DTD名称”用于指定该DTD文件的标识名称，它只在使用关键字PUBLIC的DOCTYPE声明语句中出现。DTD标识名称需要用双引号括起来，例如，用于Java Web应用程序的配置文件的DTD文件的标识名称为”-//Sun Microsystems,Inc.//DTD Web Application 2.3//EN”。DTD标识名称应符合一些标准的规定，对于ISO标准的DTD以”ISO”三个字母开头；被改进的非ISO标准的DTD以加号”+”开头；未被改进的非ISO标准的DTD以减号”-”开头。紧跟着开始部分后面的是双斜杠”//”及DTD所有者的名称，在这个名称之后又是双斜杠”//”，之后是DTD所描述的文件的说明，最后在双斜杠”//”之后是语言的种类。虽然标识名称看上去比较复杂，但这完全是由DTD文件发布者去考虑的事情，XML文件的编写者只要把DTD文件的发布者事先定义好的DTD标识名称复制到相应的位置就可以了。
“DTD文件的URL”部分指定该DTD文件所在的位置，需要用双引号括起来。对于使用PUBLIC属性的DOCTYPE语句，”DTD文件的URL”指定该该DTD文件的在Internet上的绝对URL，例如，用于Java Web应用程序的配置文件的DTD文件的位置为
“http://java.sun.com/dtd/Web-app_2_3.dtd”。解析器在对XML文档进行有效性确认时，通常都需要从该指定的URL下载DTD文件，但是，对于一些已经制定成为了行业标准的DTD文件，一些相应的解释器程序可能已经将他们内嵌进去，所以在解析时并不一定到指定的URL进行下载。对于使用SYSTEM属性的DOCTYPE语句，”DTD文件的URL”除了可以是Internet上的一个绝对URL外，它还可以是一个本地文件系统的相对路径。
该DTD”http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”，在W3C网站上，并包含所有可用的svg元素。
第 5 页 共 23 页
SVG 语法结构说明
第三行：<svg>标记告诉浏览器，这是一个SVG文档，SVG文档的宽和高（或叫做SVG的画布大小）用height和width属性来定义，如果不定义 width和height属性的话，画布的范围将是整个浏览器，x，y属性告诉浏览器将SVG画布放到什么位置，x属性与我们平常所用top属性相同，指浏览器的top位置，y属性等同于浏览器的left位置，当然，这里也可以使用相对位置来定位，即百分比。
在指定width和height后，我们实际上就建立了一个显示图形的显示区，单位可以使用em、ex、px、pt、pc、cm、mm，如果不指定单位，则缺省的单位是像素点。所有其他物品的测量数字的单位与width和height所使用的单位相同。
svg文档以根元素<svg>开始，包含开始标签<svg>和结束标签</svg>。version属性定义了svg的版本，xmlns属性定义了svg的名称空间。
名称空间的声明指定了这些 SVG 元素位于 SVG 名称空间内，编写这些元素时无需带任何名称空间的前缀。在使用Adobo SVG Viewer3.0浏览 SVG 图像时可以缺省定义这些命名空间，Adobo SVG Viewer3.0浏览环境会默认的将文档内的 XML 元素识别为SVG 元素。但当我们使用Batik 浏览 SVG 图像时，这些命名空间是必须要指定的，否则，脚本的链接和其他一些复杂的功能将不能起作用。
单位
含义
cm
公分 "1cm" equals "0.394in"
mm
毫米 "1in" equals "25.4mm"
in
英吋 "1in" equals "90px"
pt
点（72点 = 1 英吋）
pc
派卡（12 点 = 1 派卡，6 派卡 = 1 英吋）
px
像素（有时随格式化程式或设备的不同而有所不同，所以要小心使用）
em
一个大写M 的宽度
第四行：所有的SVG内容，都被放到<svg></svg>标记之间。
<title>元素是对标题的描述。如果不指定<title>元素，标题则显示svg文档的路径。
第五行：desc元素包含一些对svg文档描述性的信息。此部分不显示。
第六行：如果一个SVG对象(包括元素、属性、组元素)需要被多次使用，可以首先对该对象进行声明定义。使用defs元素，该定义中必须包括ID标志。象 HTML 页面一样，id 属性创建了文档中的一个引用点。
当需要将预定义项作为元素使用时，是通过用 <use/> 元素将它们链接到文档。并确定放置对象的位置，利用xlink属性指定对象的ID标志，完成调用：<use xlink:href=”#id” />。
当需要将定义的项作为属性使用时，使用url函数引用指定对象的ID标志，完成调用:url(#id)。
文中定义了内嵌的CSS。
第七行：在SVG中，可以通过脚本编程来实现一些比较复杂的交互操作。SVG用<script>元素来在SVG文档中插入脚本，它的功能几乎和HTML中的<script>标记一样。
<script>有两个属性，type=“content-type”，这里指明所用的script语言的类型。默认情况下script采用的语言是JavaScript语言。
Xlink:href=“<uri>“指明引用外部脚本文件的url。
第八行：通过<symbol>元素，预定义一个圆模板。
第九行：通过<symbol>元素，预定义一个由两个圆组成的模板。注意，在<defs>字节里，可以通过<use>元素引用<defs>已经预定义好的元素。
第十行：通过<symbol>元素，预定义一个由三个圆组成的模板。我暂且把它想象成一个变压器组。
十一行：预定义一些基本图元元素，如矩形、划线、点划线等。
如需要画虚线，请注意stroke-dasharray属性的使用。该属性是一个整数系列（如 3、2、3和3），它允许对虚线中每一划的相对长度进行控制。stroke-dasharray的附值个数如果是偶数就表示为画多
第 6 页 共 23 页
SVG 语法结构说明
少空多少的形式；如果是奇数就自动在后面加相同的数形成偶数，比如1 2 3就会变成1 2 3 1 2 3 于是就可以表示为画多少空多少的形式。
十二行：预定义图形组。（让我暂且想象把一个矩形和两个圆组合成一个专用变压器），注意use的使用方法。
在以后需要用”专用变压器”的地方，只管通过<use>元素引用（即<use xlink:href=“#专用变压器”）就可以了。
增加新的图标（专用变压器）只是在不同的位置增加一个引用而已。再不增加实际的绘图数据。减少了数据量；同时，如果要修改某类信息的显示图标，只要修改预定义的图标即可，方便了管理。图标在地图上的实际大小和位置为transform指定的大小和位置，其中scale指定图标的缩放比例，translate指定图标的x方向和y方向的偏移。
另：由于SVG是基于XML格式的，除了使用其内置的属性外，可以对其属性进行任意扩充，以实现自定义的功能。在SVG图形中，对象的属性id是用来标志唯一对象的编号，可以通过SVG文档对象的getElementById()函数来获取指定的对象。WebGIS采用id好作为图形内在的标示，而自定义其他的属性如名称(name),提示信息(tip)等来存储其GIS属性。获取或赋值这些属性的方法是调用getAttribute及setAttribute函数。
十三行：我只是把三个圆组合暂且想象成一个”变压器组”，其他同上。
十四行：预定义标记（箭头）、路径。
十五行：根据编组元素<g>的特点，将其用于图层管理，很方便的控制使用。
通过采用组对象来实现图层管理功能，不同图层的对象包含在不同的组中。通过设置组的属性，就可以实现如可见性
（visibility=visible|hidden）、颜色、透明度等设置以及选中、删除所有对象等操作。SVG中的对象的样式属性具有继承性，如果下一级
没有某样式属性，则直接使用其上一级的属性，以此类推，直到顶级为止。如：对某层设置某个显示透明度，则其下级元素显示时，均采用
该透明度，除非其下级元素指定了透明度属性。
这个容器可以用来标识元素，或提供一个公共属性（本地定义的属性将会覆盖公共属性）。
十六行：通过<use />元素引用预定义项，将它们链接到文档中，如：<use xlink:href="#c1" />。其中c1为<defs>字节里定义的元素的id属性值。
注意:
※ <use />元素在以这种方式使用时成为了一个可以拥有自己坐标系统的容器。
※ xlink之后，图元的坐标+use元素里设置的坐标=显示的坐标
※ 还有在引用可重用元素也允许每次使用不同的属性值。
十七行：通过transform属性的scale和translate可以分别指定元素在的x、y方向的缩放量及元素在x、y方向上的便移量。
十八行…二十三行：这一段分别创建了SVG的六种基本形状：圆、椭圆、矩形、线、折线和多边形及路径。有关SVG的基本形状的详细介绍，请点击
链接SVG的基本形状。
请注意 url() 函数的使用。
二十四行：创建一个文本。有关文本的详细介绍，请点击链接输出文本。
二十五行：实现文本的换行显示。
二十六行：如何分别控制各行文本的属性。
二十七行：SVG 能将文本沿路径排列。要实现这一点，需创建一个链接到预定义的路径信息的textPath元素。在<defs>元素里定义的id=“wavyPath”的path对象即是。
二、SVG中常用的基本形状：
SVG 定义了六种基本形状，它们是圆（circle）、椭圆（ellipse）、矩形（rect）、线（line）、折线（polyline）和多边形（polygon），这些基本形状和路径（path）一道，可以组合成任意形状的图像。每个基本形状都带有
第 7 页 共 23 页
SVG 语法结构说明
指定其位置和大小的属性。它们的颜色和轮廓分别由fill、stroke、stroke-width属性确定。下面一一介绍其语法：
1．矩形<rect>标记允许你创建矩形或它的变体，比如正方形，圆角矩形等。语法如下：
<rect x="80" y="53" width="189" height="52" style="fill:rgb(39，44，231); stroke:rgb(0，0，128); stroke-width:1"/>
x属性定义了矩形左上角顶点在用户坐标系X轴上的坐标，缺省值为0；
y属性定义了矩形左上角顶点在用户坐标系Y轴上的坐标，缺省值为0；
width和height属性定义了矩形的宽度和高度，其中任意一个值为0，矩形都不显示
style属性允许我们定义SVG推荐标准支持的CSS样式属性。
fill属性定义了长方形的填充颜色，这里采用的是rgb的格式，SVG也支持颜色名和16进制的颜色格式，比如:fill:red或fill:#ff0000。
比如将填充红色，可以用fill=”red” 或用 fill=”rgb(255,0,0)” 亦或用 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定义圆角矩形的椭圆角在X方向的半轴长度。如果rx的值大于矩形宽度的一半，则取值矩形宽度的一半。
ry定义圆角矩形的椭圆角在Y方向的半轴长度。如果ry的值大于矩形高度的一半，则取值矩形高度的一半。
2．圆<circle>要定义一个圆，只需要指顶圆心的坐标、半径即可，也可使用样式单属性定义外观的样式，语法如下：
circle cx="143" cy="163" r="84" style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>
其属性定义如下：
cx：是圆心在用户坐标系中的X坐标值，缺省值为0.
Cy:是圆心在用户坐标系中的Y坐标值，缺省值为0.
r:是圆的半径，不允许为负数。如果是0，则圆形不显示。
3．椭圆<ellipse>定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可。语法如下：
<ellipse cx="160" cy="163" rx="101" ry="81"
style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/>
其常用属性定义如下：
cx:是椭圆中心在用户坐标系中的X坐标值，缺省值为0.
cy:是椭圆中心在用户坐标系中的Y坐标值，缺省值为。。
rx:是X方向上椭圆的半轴长，不允许为负数。如果是0，则椭圆不显示。
ry:是Y方向上椭圆的半轴长，不允许为负数。如果是。，则椭圆不显示。
4．线段<line>通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线。如：
<line x1="127" y1="65" x2="127" y2="200" style="stroke:rgb(0，0，0);stroke-width:2"/>
要想得到很细的线，可以指定stroke-width为大于0小于1的数值。
其常用属性定义如下：
X1:是线段起点的X坐标值，缺省值为0。
yl:是线段起点的Y坐标值，缺省值为。
x2:是线段终点的X坐标值，缺省值为0。
第 8 页 共 23 页
SVG 语法结构说明
y2:是线段终点的Y坐标值，缺省值为。
5．折线<polyline>这个标记通过指定各个点的坐标，来定义一条折线，格式如下：
<polyline points="100，200 100，20 10，200 100，20" style="stroke:rgb(64，64，64);stroke-width:1"/>
其主要属性为points：
points：表示折线各顶点坐标的一个列表，顶点坐标的格式为”x,y，其中x表示顶点的横坐标、x表示顶点的纵坐标，不同顶点坐标之间用空格分开。绘图程序将按照points中的顶点依次绘制图形。
6．多边形<polygon>这个标记用来指定连续的点的坐标来，定义多边形。语法如下：
<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"/>
其主要属性为points
points：points的取值与折线的points一样，但是在绘制多边形的时候，绘图程序不但按照points中的顶点依次绘制图形，而且还将最后一个顶点与第一个顶点连接起来构成一个封闭图形。
注：在SVG中，允许使用浮点数来达到精确控制。
7．路径<path>标记是SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的。语法如下：
<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"/>
用<path>元素生成一个简单的多边形。
路径是一系列命令，用来创建作为图像一部分精确定义的形状。该形状可以是开放的（如线）或闭合的（如多边形），并可以包含一条或多条线、
曲线和线段。
特别是在这两种情况下：第一，当图像需要曲线，它不能由多边形或折线创建，第二，当动画或文本需要沿页面上的特定形状前进时。这就需要
路径了。
下面是path标记的d属性使用的命令，指令解释如下：
M = 移动
L = 画直线
H = 水平画线
V = 垂直画线
C = 画曲线
S = 画平滑曲线
Q = 画贝塞尔曲线
T = 画平滑贝塞尔曲线
A = 画圆弧
Z = 关闭路径的描绘。
注：大写字母说明这些坐标是相对于整个坐标系统的绝对坐标。小写字母命令则指明为相对坐标。
<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 第 9 页 共 23 页
SVG 语法结构说明
C186.375 384 211 361.614 211 334 C211 300.863 186.375 274 156 274"
style="fill:none;stroke:darkgreen;;stroke-width:2"/>
(1) 坐标数据和指令之间的空格可以省略，但坐标致据之间的空格显然不能省略。
(2) 当绘制水平或垂直线段时，可以使用H和V命令代替L。使用H或h时，后面只需要加一个代表x坐标的参数，Y坐标映省与当前点相同。
同样，使用v或v时，后面也只需要加一个代表Y坐标的参数。如果这两个命令字母后面跟了多个数值,则每一个数值被认为是一次单独的绘制
线条的命令，而不像L和1命令那样把每两个数值结合起来作为一个点的一对坐标值来加以处理。
(3) 一对坐标值的XY坐标之间可以用空格或逗号隔开，但坐标对与坐标对之间只能用空格作为分隔符。
(4) 路径闭合命令虽然也有Z和z：两种形式，可效果是一样的，使用时没有区别。
(5) C 代表Curve（贝赛尔曲线控制），C5,45 45,45 45,5中的点（45,5）表示第2个点的位置，中间的两点（5,45），（45,45）分别代表前一个点
（5,5）和后一个点(45,5)之间的曲柄点的位置。
(6) S和s命令是绘制”光滑”三次贝塞尔曲线的命令。一条复杂的曲线由多个曲线弧段所构成，弧段与弧段之间要光滑衔接，各个弧段的控制点
必须满足一定条件。首先，这一段曲线弧的起点必须是前一段曲线弧的终点，否则连不上；其次，这一段曲线弧的第一控制点必须与前一段
曲线弧的第二控制点呈对称关系，对称中心是这段曲线弧的起点，只有这样才能保证曲线衔接处的光滑。S和s命令的语法
是”S X2 y2 destx desty”，省略了光滑曲线弧所隐含的第一个控制点的坐标。命令执行完后，当前点坐标同样停留在最后绘制的一段曲线弧
的终点上。
SVG中路径命令可以创建三种类型的曲线：
<1>、椭圆曲线是椭圆的一部分，也称为弧。A（或a）命令通过指定起点、终点、x 和 y 轴半径旋度和方向来创建它们。弧命令的格式如下：
A radiusX, radiusY x-axis-rotation large-arc-flag, sweep-flag endX, endY
"x-axis-rotation"是此段弧所在的椭圆的X轴与水平方向的夹角，也即x轴的旋转角度;
large-arc-flag、sweep-flag决定了椭圆弧的绘制方向，值是0或1；
(endX，endY)是椭圆弧终点坐标。至于圆心坐标则是自动计算出来的。
<2>、三次贝塞尔曲线由一个起点、一个终点和两个将曲线”拖”向自己的控制点定义。C（或c）命令（指定起点和终点）和 S （或s）命令
（假设这条曲线从最近的命令终止的地方继续）创建这些曲线。
<3>、二次贝塞尔曲线与其三次贝塞尔曲线类似，不过仅包含一个控制点。Q（或q）和 T（或 t）命令可以创建这些曲线。
（曲线）续：
贝塞尔曲线的形状由起点和终点以及控制点的位置确定。这些命令的格式如下：
C control1x, control1y, control2x, control2y, endx, endy
S control2x, control2y, endx, endy
Q controlx, controly, endx, endy
T endx, endy
对于S和T命令，假设第一个控制点为前一条曲线的第二个控制点的反射。
由于描绘路径比较复杂，建议使用画图工具包来生成。
三、输出文本：
除了形状以外，SVG图像还可以通过text标注输出文本信息。SVG提供给设计人员对文本的大量控制，可以获得很好的图形效果。如： <text x="10" y="50" font-size="30">Welcome to the world of SVG!</text>
第 10 页 共 23 页
SVG 语法结构说明
<text>元素主要属性有：x,y,dx,dy,rotate,textLength,lengthAdjust
x,y表示文本的横纵坐标。
dx,dy表示移动的横纵坐标。
rotate表示旋转的度数。
任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。
一个不足之处是 SVG 不执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。可以使用 tspan 元素将文本元素分成几部分，允许每部分有各自的样式。在 text 元素中，空格的处理与 HTML 类似；换行和回车变成空格，而多个空格压缩成单个空格。
<text x="10" y="50" font-size="30">Welcome to the world of</text>
<tspan fill="red" font-size="20"> SVG!</tspan>
</text>
四、颜色：
颜色对于 SVG 图像是极其重要的。单个颜色可以直接使用它们的 RGB 值指定，或者使用差不多 150 个颜色关键字中的一个来间接指定，该关键字也引用 RGB 值。R即RED;G即GREEN;B即BLUE。
采用rgb的格式表示为rgb(255,0,0)表示红色，rgb(0,255,0)表示绿色，rgb(0,0,255)表示蓝色。
RGB 值在 0 到 255 数值范围内指定一种颜色的红、绿、蓝成分的相对亮度。
SVG也支持颜色名和16进制的颜色格式，比如:fill:red或fill:#ff0000。五、SVG中显示中文： 解决步骤：
1、将文件存成UTF-8 操作：UltraEdit file->convisions->ASCII to UTF-8
2、要在svgviewer中显示中文字体，需要将中文字体名称进行”国际化”， 即将汉字字体名称改为英文名称，如将”宋体”改为”Simsun"，”黑体”改为"Simhei"等，下面是部分字体对照列表：
English Name Localized Name SimSun 宋体 SimHei 黑体 FangSong_GB2312 仿宋_GB2312 KaiTi_GB2312 楷体_GB2312 YouYuan 幼圆 STSong 华文宋体 STZhongsong 华文中宋 STKaiti 华文楷体 STFangsong 华文仿宋 STXihei 华文细黑 STLiti 华文隶书 STXingkai 华文行楷 STXinwei 华文新魏 STHupo 华文琥珀 STCaiyun 华文彩云 FZYaoTi 方正姚体简体 FZShuTi 方正舒体简体 NSimSun 新宋体 LiSu 隶书
3、在SVG里这样写：
……
<text style="fill:black;" font-size="30" font-family="SimSun"
x="100" y="100" width="200" height="30"> 小样，你给我显示中文撒 </text>
……
六、变换：
在使用SVG时，象缩放、平移这样的操作就在所难免了。执行变换改变了元素所在的坐标系统，改变了它的外观。变换可以用来以数种方式改变元素的外观：
translate(x,y)：该变换按指定数量偏移元素。
scale(x, y)：该变换更改元素的大小。可以分别控制 x 和 y 方向上缩放量，但如果只指定一个值，那么它将用于两个方向。缩放量可以是负数。
rotate(n,x,y)：对( x , y )旋转坐标轴。
第 11 页 共 23 页
SVG 语法结构说明
※若没有给旋转中心，则以原点为预设旋转中心。
需要注意的是，在旋转变换中使用的角度是以度为单位的，正的数值表明是顺时针方向，0度表示正东，90度表示正南等。
skewX(n)/ skewY(n) ：这两种变换根据适当的轴按指定的像素数量偏斜元素。
也可以使用矩阵指定变换。
在具体使用时，需注意的是transform 属性的设置效果是一次性的而不是累加的，通过scale所进行的地图缩放是以地图的左上角为基点实施的。
对于复合变换，最关键的就是顺序了。
1．首先我们来了解一下图形变换的齐次式计算方法： 图1为基本几何变换齐次式
这是一个基本图形变换齐次式。等式的最右边是一个坐标点未变换前的坐标矩阵，最左边是该坐标点变换后所在位置的一个三行一列的坐标矩阵，中间那个三行三列的矩阵就是变换矩阵。不同的变换方式将对应不同的变换矩阵，图形平移效果就是通过这样一个变换齐次式来实现的。 平移:如果需要将图形平移（tx，ty）个坐标时，采用如下的变换矩阵带入变换方程。 图 2. 平移变换矩阵
缩放：如果需要在 x 轴方向实现 sx 倍缩放，在 y 轴方向实现 sy 轴缩放时，采用如下的变换矩阵带入变换方程。 图 3. 缩放变换矩阵
旋转:如果需要将图像旋转 a 度时，使用如下的变换矩阵带入变换方程。 图 4. 旋转变换矩阵
2．采用复合几何变换的数学模型分析
2.1．数学分析 当两组变换同时作用于同一个图像时，连续使用该等式，得出如下等式。由于做变换的时候是将变换矩阵放在矩阵积的左边，所以对于复合变换的式子，应该从右向左进行读。对于如下的式子：从右至左依次是变换前的坐标，第一次转换的转换矩阵，第二次转换的转换矩阵，转换后的坐标值。
图5．进行两次变换的复合矩阵
进一步推导 n 次几何变换的复合变换等式： 图 6． n次变换的复合矩阵
3．例子：放大一倍和平移50个像素的复合变换<g transform=" scale(2 ) translate(50 50)">，其对应的计算矩阵应为图7：
放大一倍和平移50个像素的复合变换<g transform=" translate(50 50) scale(2 )">，其对应的计算矩阵应为图8：
4．根据上面的分析我们可以看的出，
先进行缩放变换再进行平移变换的复合变换时，变换后原图元的坐标会映射到新的位置，其中： X1=Sx(X+dx) Y1=Sy(Y+dy)
先进行平移变换再进行缩放变换的复合变换时，变换后原图元的坐标会映射到新的位置，其中： X1=Sx*X+dx Y1=Sy*Y+dy
5. 一个常用复合变换实例的实现--定点变换
第 12 页 共 23 页
SVG 语法结构说明
所谓定点变换就是在图形变换中指定一个固定的点，在变换结束后，该点的位置不发生变化。定点变换在 GIS 的实际运用中很常见，比如将地图放大到指定倍数而保持地图的某个位置（如：鼠标点击的位置）不发生变化。我们以定点缩放为例描述定点变换的使用方法。 假设我们用(x1,y1)点来做定点变换的基准点进行几何变换，要求实现变换后（x1,y1）的位置不变。 定点变换的基本思想是基于这样一个特性：当图像进行缩放，或旋转变换的时候，坐标原点的位置并不发生变化。定点变换的实现方法就是，先将基准点（x1,y1）平移到原点即做一次[-x1,-y1]变换，进行变换后再将变换后的原点平移到（x1,y1）即再进行一次[x1,y1]变换。
图9基于（x1,y1）定点变换
语法：transform=”translate(-ｘ × (n-1) , -y × (n-1) ) scale(n)”
七、viewBox：
讲viewBox不得不提SVG viewport(SVG视口)。视口(viewport)是SVG画布(SVG canvas)中定义的矩形区域，在区域中展现SVG内容。
<一>viewport使用区域
1、用来放置物件的范围
2、可在此区域内订定坐标（长宽 单位长）
3、此区域可做叠合
<二>坐标的设定
1、坐标的原点在左上角
2、坐标设定好后，接下来便可在此坐标上构图（构图要素：位置、大小etc.）
3、依单位不同，大小也会不同
4、一般说来，坐标系定义当前画布的位置和距离。视口坐标系统是从开始处理"svg"元素到处理viewBox特性之前处于活动的坐标系。
例如：
<svg width="200" height="200">
<rect x="10" y="10" width="50" height="30" style="stroke: black; fill: none;"/>
</svg>
<三>叠合(Nest)--在一个构图区域下，可以再包含构图区域
例如：
<svg width="200" height"200" viewBox="0 0 200 200">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
<rect x="100" y="5" width="30" height="80" style="stroke: blue; fill: none;"/>
<svg x="100" y="5" width="30" height="80" viewBox="0 0 50 50"
preserveAspectRatio="xMaxYMax meet">
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/>
</svg>
</svg>
而viewBox表示的是当前的显示范围，viewBox中有四个数字，分别表示：
最小的x坐标，
最小的y坐标，
最大x坐标和最小x坐标之差，
最大y坐标和最小y坐标之差，
因此只要改变viewBox的值就可以实现SVG图象的放大和缩小。这就是viewBox放大、缩小的原理。
当分割后X Y的比例不一样时，将由preserveAspectRatio 属性确定如何实现缩放。
当preserveAspectRatio="xMinYMin meet"时，以较小单位为准；
当preserveAspectRatio="xMinYMin slice"时，以较大单位为准；
第 13 页 共 23 页
SVG 语法结构说明
当preserveAspectRatio="none"时， none 值将使图像伸展以适应框，即使这样会引起图像失真。xMinYMin值将图像的最小 x 和 y 值与框的最小 x 和 y 值对齐。其它可能的值有 xMinYMid、xMinYMax、xMidYMin、xMidYMid（缺省值）、xMidYMax、xMaxYMin、xMaxYMid 和 xMaxYMax。
Min,Mid,Max指显示位置。
八、使用CSS属性：
样式表(CSS)是网页制作中一种非常有效的定义文字和图片显示样式的方法。SVG支持CSS2的规范，可以自由的使用内部样式表，植入式样式表，外部样式表。样式表的定义包括:样式选择名和样式描述。下面的例子中，"st0"是样式选择名,"fill:red"是样式描述。.st0 {fill:red;} 通过样式选择名，创作者可以层叠的调用一些不同样式来获得不同效果，而这些样式只需要定义一次以后，就可以被反复的调用。如果你希望改变图形的属性,只需要修改样式描述就可以了。效率是不是一下提高了。
实际上，所有的属性（对于所有元素，不仅是文本）都可以用级联样式表与一个元素关联，并且文本的所有 CSS 属性都在 SVG 图像中可用。
<defs> <style type="text/css">
<![CDATA[
.abbreviation { text-decoration: underline; } rect { fill: red; stroke: blue; stroke-width: 3 }
]]>
</style>
</defs>
九、链接：
在 SVG 中，通过一个 <a> 标签提供链接，这与 HTML 链接的方式几乎相同。将 <a> 标签与一个 xlink:href 属性结合使用便可以建立一个链接。在 <a>和 </a> 标签之间的所有内容都作为链接的一部分。清单展示了一个例子，它有三个元素，设置为链接到三个不同的 URL。单击这里以在浏览器中查看它们。 文本、矩形和多边形元素都有到不同页面的链接，这表明所有 SVG 元素 -- 不管是文本、圆还是不规则的多边形 -- 都可以作为一个链接。注意，如果将鼠标移动到这些元素上面，指针会相应地发生改变，表明这是一个链接语法如下：
清单.链接
<svg>
<a xlink:href="http://www.w3.org//Graphics//SVG//Overview.htm8" target="blank"> <rect x="10" y="10" width="100" height="30" rx="10" ry="10" style="fill:lightgrey"/> <text x="30" y="30" font-size="12">Click here</text> </a> <a xlink:href="http://www.ibm.com//developerworks/" target="_top"> <circle cx="100" cy="100" r="50" style="fill:grey"/> <text x="80" y="100" font-size="12">Or here</text> </a> <a xlink:href="http://www.ibm.com/" target="new"> <polygon
points="60 160,165 172,180 60,290 290,272 280,172 285,250 255" style="fill:dimgrey"/> <text x="160" y="200" font-size="12">Or even here</text> </a>
</svg>
注意xlink 中使用的 target属性值。它指示查看程序在单击这个元素时以何种方式打开一个新的浏览器窗口。
第 14 页 共 23 页
SVG 语法结构说明
十、SVG对事件的响应：
在SVG中，大多数元素(尤其是可视化元素)都具有自己的事件，这是SVG对DOM 的支持最基本的表现。事件的定义是作为元素的属性出现的，这些属性的值是一个子程序或者函数。当事件在一定条件下激发后，与事件相连接的子程序或者函数将被调用。下面的例子说明了如何使用事件的方法。
<ellipse cx="10" cy="10" rx="20" ry="15" onclick="func()"/>
在SVG中，上面的代码显示一个椭圆。其中onclick属性定义了元素ellipse的一个单击事件，并指定事件的处理函数为func()。当用鼠标单击这个椭圆时，函数func()将被调用。SVG支持的事件比较多。
对于一般的可视化元素(如形状、文字、路径等)的事件属性有:onfocusin, onfocusout, onactivate, onclick, onmousedown,onmouseup, onmousemove和。Nmouseout；
对于文档一级的元素(如<svg>元素)的事件属性有:onload, onunload, onabort, onerror, onresize, onscroll和orlzoom；
对于实现动画的的元素的事件属性有:onbegin, onend和onrepeat。这些事件都与DOM2的规范一致，如果使用DOM规范，脚本还可以注册自己的特定事件以进行处理。另外，许多事件的可用与否取决于SVG客户端解释程序是否支持这些事件，大多数DOM2的标准事件都是支持的。此外，可能还支持一些额外的事件，如可视化元素与键盘输人有关的事件。onkeypress, onkeyup, onkeydown等。
十一、<g>组和<symbol>元素的区别：
一个很简单的区别就是：<g>是绘图对象，,而<symbol>不是。也就是说<g>下面的图形对象将被直接绘制在终端设备表面，而<symbol>一般用于预定义的图元，通过<use>引用实现重复应用。
在功能上，你可以把<symbol>对象看成是放在<defs>节点中的<g>对象，就是这样，在<defs>节点内部，<g>和<symbol>基本上一样。但是如果不在<defs>内部，<g>内部的形状对象将被直接绘制，而<symbol>不能。比较一下这两段代码：
<svg width="640" height="480" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g >
<rect x="251" y="183" width="98" height="63" fill="#F30606" stroke="#000000" />
</g>
</svg>
这将绘制一个红色矩形。如果将上面代码将<g>替换成<symbol>将不会绘制任何东西。
但是对于下面这段代码,将<g>和<symbol>互相替换则效果都是一样
<defs>
<symbol overflow="visible" id="symbol">
<rect x="251" y="183" width="98" height="63" fill="#FF0000" stroke="#000000" />
</symbol>
</defs>
<use xlink:href="#symbol" />
另外<symbol>对象可以通过viewBox属性控制视图显示，而<g>不能。所以对于预定义图元，推荐使用symbol，表现力要多一些。symbol相对于<g>有更多属性,如viewBox,overflow等,可以更多控制引用对象的表现方式。Owerflow可以理解为溢位或溢流，将overflow的值设置为visible，这样在symbol中的超出视图正常范围的图元就会完整显示出来了。
这是比较简单的区别。
十二、标记：
标记是对路径的自然补充。它们是可以添加到线和路径起点、终点和顶点的元素。最常用的是将箭头添加到线的终点，不过可以使用任何对象。
过程很简单：定义标记，然后使用 marker-start、marker-end 和 marker-mid 属性将其赋值给相关元素。例如：
第 15 页 共 23 页
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="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<desc>Markers</desc>
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth" markerWidth="3" markerHeight="10" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>
</marker>
</defs>
<rect x="1" y="1" width="398" height="300" fill="none" stroke="blue" />
<!-- First row -->
<path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50" stroke="purple" stroke-width="5" fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
<!-- Second row -->
<path d="M75,200 c25,-75 50,50 100,0 s50,-50 150,50" stroke="purple" stroke-width="3" fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
</svg>
这个标记本身由一个简单的三角形路径组成，它由标记属性决定。已经设置了 viewBox，以便不管框是什么，标记本身总是会填充整个框。因为 markerUnits 值的缘故，框本身受应用标记线的大小影响。markerUnits 属性也被设置为 userSpaceOnUse，这使标记使用常规坐标系统。refX 和 refY 属性确定标记（该标记”附加”到它所标记的线）内的点。最后，标记的方位设为 auto，使它的 Y 轴与线的切线垂直。（为了理解这一方位，标记构建为指向 X 轴方向）。
请注意标记大小随笔划大小的改变而改变：
十三、SVG优点：
SVG 文件可以被很多的工具（比如记事本）阅读和编辑。
SVG 文件比 JPEG和GIF更小压缩比更大。
SVG图像是可压缩的。
SVG图像可以以任何分辨率高清晰打印。
SVG图像是可缩放的。图像的任何部分都可以无损失缩放。
SVG里的文字是可供选择和搜索（制作地图的良好功能）。
SVG支持交互和动画。
SVG是一个开放标准。
SVG文件是纯XML的。
SVG支持Xlink 和Xpointer。
十四、SVG主要元素和属性：
<text x y textLength lengthAdjust>
第 16 页 共 23 页
SVG 语法结构说明
<text>元素详解
<text>的几点属性
text元素用x和y属性定义文字的位置。Text主要属性还有Text dx,dy,rotate,textLength,lengthAdjust：
x,y表示文本的横纵坐标。
dx,dy表示移动的横纵坐标。
rotate表示旋转的度数。
text元素默认是左对齐，可以用text-anchor子属性指定文字的对齐方式：
文本左对齐： text-anchor="start"
文本居中： text-anchor="middle"
文本右对齐： text-anchor="end"。
SVG对文本的控制一个不足之处是 SVG 不执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。不过，可以使用 tspan 元素将文本元素分成几部分，允许每部分有各自的样式。在 text 元素中，空格的处理与 HTML 类似；换行和回车变成空格，而多个空格压缩成单个空格。
<tspan x y dx dy rotate>从属于<text>
tspan元素主要属性有：x,y,dx,dy,rotate,textLength,lengthAdjust,其属性解释同text。
<svg> <text style="fill:#000000;font-family:Arial;font-weight:bold;font-size:40;"> <tspan x="50" y="60,70,80,80,75,60,80,70">COMMUNICATION</tspan> <tspan x="50" y="150" dx="0,15" dy="10,10,10,-10,-10,-10,10,10,-10">COMMUNICATION</tspan> <tspan x="50" y="230" rotate="10,20,30,40,50,60,70,80,90,90,90,90,90">COMMUNICATION</tspan> </text> </svg>
<tref xlink:href="#">引用<defs>中的<text>
文本内容可以用text元素直接包含进来，或者用tref元素引用进来。
主要属性有：x,y,dx,dy,rotate,textLength,lengthAdjust,xlink:href
xlink:href属性指定引用的url。其他属性同上
例如：
<svg>
<defs> <text id="ReferencedText"> Referenced character data </text> </defs> <desc> inline vs reference text content</desc> <text x="100" y="100" font-size="45" fill="blue" > Inline character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#ReferencedText"/> </text>
</svg>
<textPath startOffset= method="align|stretch" spacing="exact|auto" xlink:href="">注意嵌套的<tspan>对后面的走向有叠加作用
<textPath>主要属性有：startOffset,textLength,lengthAdjust,method,spacing startOffset设置文字开始的位置。startOffset = "<length>"
第 17 页 共 23 页
SVG 语法结构说明
method设置文字与路径的位置关系。method = "align | stretch" align为默认值。 spacing设置文字与路径的空间。spacing = "auto | exact" exact为默认值。 xlink:href设置绑定的路径。
例如：
<svg>
<defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc> tspan within textPath</desc> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath xlink:href="#MyPath"> We go <tspan dy="-30" fill="red" > up </tspan> <tspan dy="30"> , </tspan>
then we go down, then up again </textPath> </text> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>
fill-rule属性 fill-rule="nonezero|evenodd"
fill-rule属性详解：
fill-rule
Value: nonzero|evenodd|inherit
Initial: nonzero
Applies to: shape and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
fill-rule属性指定了决定那一部分是图形的内部的运算规则。对一个没有交叉的路径来说，那一部分属于它的内部是很显然的，但是对于复杂一点的路径来说，内部的阐明并不明显。
fill-rule属性提供了两种怎样决定图形内部的两种选择:
nonzero: 本规则决定一个点是否在图形内部的方法是从该点向任意方向画直线，然后检查直线与图形的交叉。如果该点左右与图形交叉点数相同，则该点在图形外，否则在图形内。
evenodd： 本规则通过从一点向任意方向画直线然后计算该直线与图形的交叉电的数量来决定该点是否在图形内。如果交叉点数为奇数，则该点在图形内，否则在图形外。
fill：该属性指定用来填充对象内部区域的颜料。大多数情况下，该属性只是一种颜色，但它也可以是渐变或图案。这个值通常是关键字、
颜色说明或指向预定义元素的 URI。属性是对图形或字符串中字符内部着色的操作。可采用的是rgb的格式，SVG也支持颜色名和16进制的颜色格式，比如:fill:red或fill:#ff0000。如果指定一个元素没有填充色（使用fill=“none”），那么在它下面的各项会显现出来。
第 18 页 共 23 页
SVG 语法结构说明
注意：R、G、B就是Red、Green、Blue（红，绿，蓝）三种颜色。
stroke：该属性指定元素外边框的外观。象 fill 一样，它引用颜料，尽管通常将它指定为一种简单颜色。stroke后面可使用的值: none, current-color, (color)。笔划属性决定了物件是否利用笔划进行勾勒,并且使用什么样颜色的笔画."none"是无色,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜色值,(color)是自定义的色彩
stroke-width：该属性指定笔划线的宽度，控制图形的外轮廓。 stroke-width后可使用的值是: (width), inherit。
"笔划宽度"默认值是1像素宽度.用户也可以自定义宽度，可以使用像素值也可以使用百分比。
这里的所有SVG图像都使用的是像素值."inherit"代表继承前面(父)的物件(或物件组)的笔划属性。
与对象的笔划或线以及对象内部区域的填充相关的属性及子属性还有：
fill-opacity：该属性指定元素的透明性。值的范围从完全透明（0）到完全不透明（1）。
stroke-linecap：该属性确定线末端的形状，可取的值有粗端（缺省值）、圆和正方形。
stroke-linecap可使用的值是: butt, round, square, inherit "笔划端点"的属性定义了开放笔划(未闭合)的端点的形状,分别是"粗大的"butt,"圆滑的"round,"平整的"square和"继承的"inherit。
stroke-linejoin：该属性确定对象各角的外观。允许的值有直角（缺省值）、圆和斜角，如将尖角的边缘”剪掉”：stroke-linejoin=“bevel”。
stroke-linejoin可使用的值是:miter, round, bevel, inherit。笔划连接属性定义了路径拐角的形状,"miter"是默认值,"round"光滑连接,"bevel"折线连接,"inherit"继承。
stroke-miterlimit：stroke-miterlimit后可使用的值是: (miterlimit), inherit "笔划圆角连接"定义了两条相交成一定角的线在连接处的圆滑程度.数值必须为大于1的整数,默认的值是8。
stroke-dasharray：虚线比划。该属性是一个整数系列（如 3、2、3、2、4、3、2 和 3），它允许对虚线中每一划的相对长度进行控制。
stroke-dasharray的附值个数如果是偶数就表示为画多少空多少的形式；如果是奇数就自动在后面加相同的数形成偶数，比如1 2 3就会变成1 2 3 1 2 3 于是就可以表示为画多少空多少的形式。
stroke-opacity：类似于 fill-opacity，该属性确定元素笔划线的相对透明性。
opacity属性定义整个元素的透明度如，该透明度对填充和边框线都有效。opacity具有继承性和迭加性
stroke-dashoffset="0|" 表示描边时使用描边模板(如线型、渐变色彩等)的起始偏移量，缺省值是0，即从头开始。
<maker makerWidth makerHeight makerUnits refX refY orient>
marker-start:url(#) marker-mid:url(#) marker-end:url(#)
<marker>元素
markerUnits 属性也被设置为 userSpaceOnUse，这使标记使用常规坐标系统。refX 和 refY 属性确定标记（该标记”附加”到它所标记的线）内的点。最后，标记的方位设为 auto，使它的 Y 轴与线的切线垂直。（为了理解这一方位，标记构建为指向 X 轴方向）。
定义标记，然后使用 marker-start、marker-end 和 marker-mid 属性将其赋值给相关元素。
请注意标记大小随笔划大小的改变而改变。
<a xlink:href= xlink:type="simple" xlink:show="new|replace" xlink:title xlink:actuate="onRequest" target="_top|_self">
第 19 页 共 23 页
SVG 语法结构说明
<mask id maskUnits="objectBoundingBox|userSpaceOnUse" x= y= width height mask="url()">
十五、在SVG文档中遍历子节点：
在ASV中，节点下的空白也作为一个节点计算。
<g><g></g></g>
<g>
<g></g>
</g>
这两个是有区别的。
#text空白节点。
可见遍历循环的条件取决于原始文档中节点的写法，这是我们不希望的。因此，正确的方法是，总是遍历所有子节点，然后根据节点的名称进行过滤。特别是在编写可以不同的SVG浏览器中移植的代码时，使用上述方式尤为重要，因为不同的浏览器对子节点遍历的处理是不一样的。Batik对子节点数量的处理和ASV就不同，Batik就不计算空白节点的数量（好像这种方式编程人员更喜欢）。因此，如果希望脚本可以在ASV和Batik下都可以运行，就必须在遍历循环中对节点名称进行判断。
十六、SVG一些基础常识补充：
1、从本质上来说，SVG文档是XML文档。这就是说SVG有某些基本属性：
<1>、所以的标记都有开始标记和结束标记，否则必须注明为空标记。空标记用反斜杠结束，如<rect />。
<2>、标记必须正确嵌套。如果一个标记在另一个标记中开始，那么它也必须在那个标记中结束。
<3>、文档必须只有一个根。一个 <svg></svg>根元素也包含一个 SVG文档的所有内容。
<4>、文档应该以 XML 声明 <?xml version=“1.0”?> 开始。
<5>、文档应该包含一个 DOCTYPE 声明， 该声明指向一个允许元素的列表。
<6>、当组合多种不同元素时，SVG图象严格按顺序放置各项，每个后继层放置在那些已放置层的上面。如果指定一个元素没有填充色(使用fill=“none”),那么在在它下面的各项会显示出来。
2、container element 容器元素
一种包含图形和其他容器元素作为子元素的元素，特别是：
<svg>、<g>、<defs>、<symbol>、<clipPath>、<mask>、<pattern>、<marker>、<a>、 <switch>。
3、current transformation matrix (CTM) 当前变换矩阵(CTM)
变换矩阵是将一个坐标系转换成另一个坐标系的数学表达是，通常用3x3的矩阵，采用方程式[x′ y′ 1] = [x y 1]。当前变换矩阵(CTM)定义用户坐标系统到显示窗口坐标系统的变换。参见坐标系统变换(Coordinate system transformations)。
4、graphics element 图形元素
图形元素是可以用来在目标画布上画出图形的元素。特别是：
<path>、<text>、<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>、<image>、<use>等。
5、graphics referencing element 图形参考元素
用对不同文档或元素的引用作为其图形内容的图形元素。特别是：<use> and <image>。
6、local URI reference 本地RUI引用
是指不包含绝对URI(<absoluteURI>)和相对定位符(<relativeURI>)的统一资源定位符(Uniform Resource Identifier [URI])，它描绘一个引用指向当前文档的一个元素。参见<defs>元素。
7、non-local URI reference 非本地URI引用
第 20 页 共 23 页
SVG 语法结构说明
是指包含绝对URI(<absoluteURI>)或相对定位符(<relativeURI>)的统一资源定位符(Uniform Resource Identifier [URI])，它描绘一个引用指向不同文档的或不同文档中的某个元素。参见<defs>元素。
8、paint 着色
着色是指将颜色值呈现在画布上的方法，包含有颜色值和合成alhpa值。色值控制着画布上的颜色与现有颜色的混合效果。SVG支持三种内置着色：实心色(color)、梯度(gradients)和模式(patterns)。
9、text content element 文本内容元素
一个可以定义文本串的画在画布上的SVG元素，SVG文本内容元素有：
<text>、<tspan>、<tref>、<textPath>、<altGlyph>等。
10、transformation 变换
是指当前变换矩阵(CTM)的改变，由追加的变换以一组简单变换定义(如缩放、旋转和平移)提供，也可由一组或多组变换矩阵(transformation matrices)提供。
11、transformation matrix 变换矩阵
变换矩阵是将一个坐标系转换成另一个坐标系的数学表达是，通常用3x3的矩阵，采用方程式
[x′ y′ 1] = [x y 1]。
12、URI Reference URI引用
是一个统一资源定位符([URI])作为一个引用指向文件或文件中的一个元素。
13、user coordinate system 用户坐标系统
一般说来，坐标系定义当前画布的位置和距离。但前用户坐标系是当前活动的，用来定义当前画布上的坐标和长度如何分别定位和计算的坐标系统。
14、user space 用户空间
是用户坐标系统(user coordinate system)的同义词。
15、VG viewport SVG视口
视口(viewport)是SVG画布(SVG canvas)中定义的矩形区域，在区域中展现SVG内容。
16、viewport 视口
视口(viewport)是SVG画布(SVG canvas)中定义的矩形区域，在区域中展现SVG内容。
17、viewport coordinate system 视口坐标系统
一般说来，坐标系定义当前画布的位置和距离。视口坐标系统是从开始处理”svg”元素到处理viewBox特性之前处于活动的坐标系。在这种
情况下，一个包含在父文档中并带有CSS样式定义的SVG文档片断，视口坐标系统就与其原有的CSS具有相同的方位和长度，原来的左上坐标
位视口的左上坐标。
18、我们可以定义一个视口坐标系和用户坐标系，缺省的情况下两者是一致的，度量单位也相同，如果属性值没有带单位，则使用用户坐标系的长度
单位-像素（px）。大多数情况下，用户坐标系的原点处在视口的左上角，X轴的正向朝右，Y轴的正向朝下，即如果不进行坐标变换，一切渲染
都是以初始坐标系为准。
19、透明度
在SVG中，使用style属性指定fill-opacity,stroke-opacity和opacity的值，可以控制图象的透明度。例如：fill-opacity表示填充颜色的透明程度。stroke-opacity表示线条颜色的透明程度。可取值的范围是从1到0；1表示完全不透明，
0表示完全透明；如果图象是完全透明的(opacity=0),那么图象就看不见了。
20、线条
例如：
<circle style="fill:none;stroke:blue;stroke-width:3;stroke-dasharray: 5 5 15 25" cx="130" cy="180" r="100"/>
在SVG的style属性中，stroke控制线条的颜色，stroke-width控制线条的宽度，stroke-dasharray
第 21 页 共 23 页
SVG 语法结构说明
是用来描述线段和空隙长度的。第1个
"5"表示小线段的长度，第2个"5"表示小线段和长线段之间的长度，"15"表示长线段的长度，"25"表示长线段到短线段之间的长度。事实上，
可以给上述数字序列再添上几个数字，那么该圆的边框线段和空隙就更多了。
21、<g>组元素和<symbole>元素的区别
一个很简单的区别就是,<g>是绘图对象,而<symbol>不是,也就是说<g>下面的图形对象将被直接绘制在终端设备表面,而<symbol>一般用于预定以的图元,通过<use>应用实现重复应用。
在功能上,你可以把<symbol>对象看成是放在<defs>节点中的<g>对象，就是这样,在<defs>节点内部,<g>和<symbol>基本上一样。但是如果不在<defs>内部,<g>内部的形状对象将被直接绘制,而<symbol>不能。
比较一下这两行代码：
<svg width="640" height="480" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g >
<rect x="251" y="183" width="98" height="63" fill="#F30606" stroke="#000000" />
</g>
</svg>
这将绘制一个红色矩形
如果将上面代码将<g>替换成<symbol>将不会绘制任何东西
但是对于这个代码,将<g>和<symbol>互相替换则效果都是一样
<defs>
<symbol overflow="visible" id="symbol">
<rect x="251" y="183" width="98" height="63" fill="#FF0000" stroke="#000000" />
</symbol>
</defs>
<use xlink:href="#symbol" />
另外<symbol>对象可以通过viewBox属性控制视图显示,而<g>不能；所以对于预定以图元,推荐使用symbol,表现力要多一些。
这是比较简单的区别,详细的东西建议看一下规范,symbol相对于<g>有更多属性,如viewBox,overflow等,可以更多控制引用对象的表现方式。
22、SVG(Scalable Vector Graphics) 由万维联盟W3C 推出的可用来生成二维的图形、动画技术。
23、SVG文档的基本组成部分是元素(Element)。最新的SVG112 标准草案使人们得以处理声音、视频等多媒体内容。
24、SVG动画与SMIL 的关系
SVG动画模块是SVG工作组与SYMM(W3C Synchronized Multimedia) 工作组合作开发出来的, SYMM工作组开发了SMIL (Synchronized Multimedia Integration Language) 标准, 用来在网页上展示各种多媒体内容, 包括SVG 格式的内容. SMIL110 没有动画模块,SMIL210 增添了动画模块。
SMIL 定义有4 个基本动画元素: animate , set , animateMotion ,animateColor. 这些元素有一般的属性, 如from , to , values 等, 也有
用于样条动画(Splin2eAnimation) 的专用属性, 如path , keyTimes , keySplines。
25、SVG动画与DOM的关系
很多SVG动画是用Javascript 编程实现的, Javascript 通过SVG的DOM(Document Ob2ject Model , 文档对象模型) 与SVG文档联系在一起, 控制SVG的元素及属性, 动态修改SVG元素的属性, 从而生成特定的动画效果。
由万维联盟发布的DOM规范是一组平台和语言无关的应用程序编程接口, 能够用来描述如何访问和处理XML 和HTML 文档信息, DOM将XML 和HTML 文档以树状结构进行描述。
26、命名空间
需要特别指出的是用于创建超级链接节点的相关代码，当需要创建超级链接节点的时候需要明确指出节点的命名空间"http://www.w3.org/2000/svg"，为节点设置链接属性的时候也必须指定属性的命名空间
第 22 页 共 23 页
SVG 语法结构说明
"http://www.w3.org/2000/xlink/namespace/"。关于命名空间在 SVG 中的意义我们可以通过在Batik 中的脚本改写来深刻体会其中的内涵。
27、ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。
28、在SVG文档中遍历子节点
<g><g></g></g>
<g>
<g></g>
</g>
这两个有区别
#text空白节点
第 23 页 共 23 页