SVG语法结构
一、S VG文档结构格式
1.<?xml version="1.0"encoding="UTF-8"standalone="no"?>
2.<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "www.w
3.<svg width="1000"height="400"viewBox="0 0 1000 400"Version="1.1"xmlns="-/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>
<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"/>
<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="53 1 2 1 3"
/>
</defs>
12.<defs>
svg图形<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"/>
<use xlink:href="#c1"x="100"y="100"/>
17.<use xlink:href="#lineation1"x1="20"y1="50"x2="250"y2="50"transform="scal
e(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"/>
<ellipse cx="160"cy="163"rx="101"ry="81"/>
<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"/>
<polyline points="100，200 100，20 10，200 100，20"/>
<polygon points="223.5，123.034 276，213.966 171，213.966"/>
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="一次连线层"></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文件的位置为
∙“java.sun/dtd/Web-app_2_3.dtd”。解析器在对XML文档进行有效性确认时，通常都需要从该指定的URL下载DTD文件，但是，对于一些已经制定成为了行业标准的DTD文件，一些相应的解释器程序可能已经将他们内嵌进去，所以在解析时并不一定到指定的URL进行下载。对于使用SYSTEM属性的DOCTYPE语句，”DTD文件的URL”除了可以是Internet上的一个绝对URL外，它还可以是一个本地文件系统的相对路径。
该DTD”/Graphics/SVG/1.1/DTD/svg11.dtd”，在W3C网站上，并包含所有可用的svg元素。
第三行：<svg>标记告诉浏览器，这是一个SVG文档，SVG文档的宽和高（或叫做SVG的画布大小）用width和height属性来定义，如果不定义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的版本，xlmns属性定义了svg的名称空间。
名称空间的声明指定了这些SVG 元素位于SVG 名称空间内，编写这些元素时无需带任何名称空间的前缀。在使用Adobo SVG Viewer3.0浏览SVG 图像时可以缺省定义这些命名空间，Adobo SVG Viewer3.0浏览环境会默认的将文档内的XML 元素识别为SVG 元素。但当我们使用Batik 浏览SVG 图像时，这些命名空间是必须要指定的，否则，脚本的链接和其他一些复杂的功能将不能起作用。
所有的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的附值个数如果是偶数就表示为画多少空多少的形式；如果是奇数就自动在后面加相同的数形成偶数，比如1 2 3就会变成1 2 3 1 2 3 于是就可以表示为画多少空多少的形式。
十二行：预定义图形组。（让我暂且想象把一个矩形和两个圆组合成一个专用变压器），注意use的使用方法。
在以后需要用”专用变压器”的地方，只管通过<use>元素引用（即<use xlink:href="#专用变压器"/>）就可以了。
增加新的图标（专用变压器）只是在不同的位置增加一个引用而已。再不增加实际的绘图数据。减少了数据量；同时，如果要修改某类信息的显示图标，只要修改预定义的图标即可，方便了管理。图标在地图上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。