没有合适的资源?快使用搜索试试~ 我知道了~
SVG文档语法结构.pdf
5星 · 超过95%的资源 需积分: 26 32 下载量 187 浏览量
2008-11-28
16:18:48
上传
评论 1
收藏 397KB PDF 举报
温馨提示
试读
23页
SVG文档结构格式,为了方便说明,在文中加入标号和冒号;为了方便阅读,加了超链接
资源推荐
资源详情
资源评论
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 页
剩余22页未读,继续阅读
资源评论
- 鼻子加农炮2012-07-10svg速成,相当给力
sugshs
- 粉丝: 2
- 资源: 11
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 成都市地图含高新区(高新南区,高新西区),天府新区,东部新区虚拟行政区划
- XILINXFPGA源码XilinxEDK设计试验
- XILINXFPGA源码XilinxEDKMicroBlaze内置USB固件程序
- 基于 django 的视频点播后台管理系统源代码+数据库
- 基于Java的网上医院预约挂号系统的设计与实现(部署视频)-kaic.mp4
- 新建项目opengrok
- XILINXFPGA源码XilinxDDR3最新VHDL代码(通过调试)
- XILINXFPGA源码XilinxDDR2存储器接口调试代码
- 班级事务管理系统设计与实现(部署视频)-kaic.mp4
- excel带下拉框展示(动态展示)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功