12.2  SVG DOM常用属性和方法介绍

http://book.csdn.net/bookfiles/605/10060519574.shtml

　　将以Adobe SVG Viewer提供的属性和方法为准，因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同，有些方法和属性是某个解析器所特有的。SVG支持DOM2标准。

12.2.1  文档初始化相关

　　evt属性

　　evt表示事件本身，可以通过evt获取与当前事件相关的信息，用户可以在script中定义响应函数，进行相应的处理。它与普通JavaScript脚本中的event基本相同，只不过在普通JavaScript的脚本中简写成“e”。

　　ownerDocument属性

　　通过引用该属性获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。

　　使用举例：svgdoc = evt.target.ownerDocument

　　getOwnerDocument()方法

　　通过调用该方法获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。

　　使用举例：svgdoc = evt.target.getOwnerDocument()

　　target属性

　　通过引用该属性获得事件产生于哪个SVG元素，有时可能是该元素的父元素。

　　使用举例：object = evt.target

　　getTarget()方法

　　通过调用该方法获得事件产生于哪个SVG元素，有时可能是该元素的父元素。

　　使用举例：object = evt.getTarget()

　　例程12-1  获得SVG文档对象

<svg width="640" height="480" onload="init(evt)"> ①
    <script><![CDATA[
function init(evt)
{
svgDoc = evt.target.ownerDocument; ②
svgRoot = svgDoc.rootElement;
alert(svgRoot.nodeName);
}
]]></script>
    <rect x="100" y="100" width="100" height="50"
         style="fill:rgb(255,0,0);stroke-width:2"/>
</svg>

　　该例展示了如何在SVG文档被载入后，调用初始化程序，以获得SVG的DOM结构，为后续的编程做好准备。

　　例程12-1中，①处表示在SVG文档载入时激活的“onload”事件中执行“init”函数；“init”函数先是得到SVG Document对象，然后获得该对象的根元素（也就是“SVG”元素），最后的效果是弹出一个消息框，上面显示“SVG”。

　　②处的代码可以替换为“svgDoc = evt.getTarget().getOwnerDocument;”，得到的效果是一样的。

12.2.2  DOM对象操作相关

　　前面我们已经介绍过，DOM对象是一个树型的结构，并且经过载入后就放在内存中供我们读写。如何对这棵树进行操作，也就成为发挥SVG交互性很关键的一步。下面所示的方法中，有些是文档对象（Document）的方法，有些是文档元素（Element）的方法，需要区别开来。DOM可以分为三大部分：文档基本元素、文档对象和各种类型的从文档基本元素派生出的文档元素。文档对象是文档对象模型的顶级对象，它包含了整个文档的内容。各种类型的文档元素派生自文档基本元素类型，用于描述文档中各种实际存在的元素。其中可以定义一种文档元素，它们可以容纳其他的文档元素，这些元素就是容器元素，实际上文档对象就是最大的容器元素。由于文档对象模型中存在容器元素，因此所有的对象都组成一个树状结构，称为文档对象树或者DOM树，其中根节点就是文档对象。
(本文未完)

坐标系统与视口(ViewPort)

　　SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成，跟常见的测量坐标系不同的是，SVG的坐标系统的原点在左上角而不是右下角，SVG的坐标系统也被称为工作区坐标系统或者矩阵坐标系统。如图1所示。
SVG的渲染都是在一个矩形区域内发生的，这个有限的矩形区域在SVG中被称为“视口”，超出这个视口的图形将不被显示，所以视口也就是SVG的渲染区域，用户能看到的SVG内容的区域。SVG客户端在解析渲染一个SVG文件前，会根据实际显示设备的参数来确定视口的参数，比如视口的一个像素代表实际显示设备尺寸的多少毫米等。在获取这些有效参数后，SVG客户端就会初始化视口，建立以像素为单位的SVG坐标系统。SVG的视口尺寸由<SVG>根标签的“width”和"height"两个属性来决定，也就是SVG整个图像在浏览器中显示的大小，使得视口的坐标系统同用户坐标系统相同。如果有若干个<svg>元素嵌套在一起，那么决定初始化视口的是最外层的那个<svg>元素。

***1
图1 两种坐标系统的比较

坐标系统初始化的SVG实例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example InitialCoords - SVG's initial coordinate system</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />

    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>

  </g>
</svg>

　　该实例的SVG视口大小是宽300，高100，单位是像素(px)。从图2中可以看出，SVG坐标系的原点(0,0)在左上角，与视口的左上角完全重合。此时，SVG坐标系同用户坐标系一致，没有发生变形错位的现象。

***2
图2 坐标系统初始化

http://www.chinasvg.com/index.php?option=com_sobi2&sobi2Task=sobi2Details&catid=5&sobi2Id=6&Itemid=6

　　文章对SVG动画属性进行了详细了介绍，首先介绍基本的SVG动画类型：
移动和旋转动画、拉幕和缩放动画、色彩渐变动画、沿路径动画、顺序与同步动画；之后介绍了内嵌脚本和外部脚本的SVG脚本动画。

　 　SVG中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等。文章介绍了SVG元素的代码及其含意。SVG元素分为图形元素、容器元素、图形引用元素、文本、SVG文档片断内容。

　 　"viewBox"的作用是规定视口的坐标范围，范围重新定义后，缺省的坐标度量单位也会改变。本篇文章介绍了SVG ViewBox属性，并且通过SVG ViewBox实例代码及演示理解SVg ViewBox。