SVG元素和代码解释.doc

SVG 元素和代码解释元素和代码解释 SVG 中图形元素(graphics element)是可以用来在目标画布上画出图形的元素， 包括定义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等 文章介绍了 SVG 元素的代码及其含意SVG 元素分为图形元素、容器元素、图 形引用元素、文本、SVG 文档片断内容来源：SVG 中国(ChinaSVG.COM)1 图形元素图形元素SVG 中图形元素(graphics element)是可以用来在目标画布上画出图形的元素，包括定 义的标准形状，特别是矩形、圆形、椭圆形、直线、折线和多边形等1) 矩形矩形矩形用元素矩形用元素 rect 来表达来表达代码：含意：绘制宽 200 像素，高 100 像素，填充色为绿色的矩形(2) 圆形圆形圆形用元素圆形用元素 circle 来表达来表达代码：含意：绘制半径为 50 像素，填充色为蓝色的圆形(3) 线段线段线段用元素线段用元素 line 来表达来表达代 码：含意：从点(50,50)到点(200,200)绘制一条蓝色 10 像素宽的线段(4) 椭圆椭圆椭圆用元素椭圆用元素 ellipse 来表达来表达代码：含意：绘制 x 轴半径为 100 像素，y 轴半径为 50 像素，边线为绿色的椭圆(5) 折线折线折线用元素折线用元素 polyline 来表达来表达代码：含意：从点(100,0)开始，经过点(93,16), (72,26), (43,25), (13,11),(-11,-13),(-16,-93), (0,-100), (16,-93),(26,72),(25,-43),(11,43),(-13,11), (-43,25),( -72,26),( -93,16)，最后到 点(-100,0)绘制一条线宽为 1 像素的绿色折线(6) 多边形多边形多边形用元素多边形用元素 polygon 来表达来表达代码：含意：以(100,100) (150,100) (300,200) (50,200)四个点为顶点绘制填充色为蓝色的 多边形，该多边形是一个梯形(7) 路径路径路径用元素路径用元素 path 来表达来表达代码：含意：按 动作定义一条填充色为绿色的路径“移动原点到(200,200)，向 Y 方向直线运 动 100，向 X 方向直线运动 200，向 Y 的反方向直线运动 100,向 X 的反方向直线运动 200“，该路径表达了一个矩形2 容器元素容器元素容器元素用于将不同的元素组合起来使用容器元素用于将不同的元素组合起来使用。

元素作为一个容器元素使用，可以将稍后要使用的元素集合起来它通常和 元素结合使用元素作为一个容器对象使用，将相关的图形对象组合起来在一个大型或复杂的 图形中使用元素非常有用3 图形引用元素图形引用元素图形引用元素图形引用元素(graphics referencing element)用对不同文档或元素的引用作为其用对不同文档或元素的引用作为其 图形内容的图形元素图形内容的图形元素元素用于将其它图像文件包括在一个已定义的矩形中元素可以与这样的元素配合使用，来实例化前面定义但还没有表现的图 形对象4 文本内容文本内容元素文本内容元素元素文本内容元素(text content element)是一个可以定义文本串的画在画布上的是一个可以定义文本串的画在画布上的 SVG 元素元素，SVG 文本内容元素有：,,,和等5 SVG 文档片断文档片断SVG 文档片断文档片断(SVG document fragment)是以是以元素开头的元素开头的 XML 文档子树文档子树SVG 文档片断可以包含独立的 SVG 文档，或是另一个 SVG 文档片 断当一个元素是另一个元素的子元素，就会有两个 SVG 文档片 断，每个元素拥有一个片断。

以下用元素来代表 SVG 文档片断与元素相比较，元素有一些特别有用的属性：(1) 可以可以 拥有自己的位置属性拥有自己的位置属性即 x 和 y 属性，所有元素的子元素的位置完全相对于元素的 位置这样只要改变元素的 x 或 y 就可以让所有子元素同时发生偏移2) 可以拥有自己的高宽属性可以拥有自己的高宽属性即 width 和 height 属性，所有超出元素高宽的子元素是不会显示出 来的这样一些拉幕动画就可以实现了3) 可以拥有显现属性可以拥有显现属性即 display 属性，修改该属性可以让所有元素的子元素一起出现或隐 藏这样整体一起的出现和消失就方便很多SVG 鼠标事件响应的四种写法鼠标事件响应的四种写法 SVG 有四种常用的鼠标响应的脚本写法(SMIL 方式、Attributes 方式、JavaScript+SMIL 方 式、EventListener 方式)，根据不同的需要让大家有更多的选择本文介绍了四种实现 SVG 鼠标事件的例子 来源：SVG 中国(ChinaSVG.COM) SVG 鼠标事件实现方式的例子效果是：单击一个红色的矩形后，它的填充 颜色会变成蓝色 1 SMIL 方式方式例程 1 鼠标事件之 SMIL 方式在前面有关“动画”效果的章节中我们使用过类似的方法，也就是在单击后 触发一个动画效果，此例中被改变的是“fill”属性，由红变蓝，中间没有渐变的 过程，一次到位。

2 Attributes 方式方式例程 2 鼠标事件之 Attributes 方式u这种事件触发方式想必大家已经很熟悉了，在上一节中，满眼尽是这种事 件触发方式，即把事件触发作为元素的属性与其它其他属性写在一起事件属 性在 u 处，“onclick”事件调用的是“changeColor”函数，参数是“evt”，这样使得 函数内部脚本可以从“evt”获得事件相关信息这种方式比较常用3 JavaScript+SMIL 方式方式例程 3 鼠标事件之 JavaScript+SMIL 方式这个例子没有图形元素的事先定义，所有定义都是通过脚本完成的，包括 事件的定义也都是动态脚本完成的，最后在内存中的 SVG DOM 机构与例程 1 是类似的例程 3 中，v 处的“createElementNS”方法，有了一个后缀“NS”是需 要添加命名空间参数的，这里的命名空间定义在 u 处4 EventListener 方式方式例程 4 鼠标事件之 EventListener 方式这种方法也是经常用到的，W3C 为是 DOM 元素绑定事件处理函数唯一真 正的标准方式原理就是使用“addEventListener”方法来注册事件方法，而且一 次性可以很方便地注册很多事件，“EventListener”被称为“事件监听器”。

“addEventListener”这个方法的参数依次是：事件的名称（如：click）、处理该 事件的函数名和是否启用事件捕获的布尔量（一般是 false）例程 4 中，u 处调用了“addEventListener”方法来注册“onclick”事件，事件 处理函数是“changeColor”值得注意的是写在参数里的事件名称，要去掉“on””， 所以填写的是“click”，而不是“onclick”在“addEventListener”的方法中有一个参数表示是否启用事件捕捉，要理解 这个变量的作用，我们需要了解一下在 DOM2 事件模型中，事件传播的三个阶 段首先，在捕获阶段（capturing phase），事件是从文档对象（Document object）开始，沿着文档树向下一直到目标对象传播.如果任何目标对象的祖 辈（不包括目标对象本身）也有一些指定注册的捕获事件的处理程序，在事件 传播的这个阶段（捕获阶段）将运行它们，是否启用事件捕捉的变量的意义也 就在于此事件传播的下一个阶段发生在目标对象本身：所有注册到目标对象的对应 事件处理程序都被运行事件传播的第三阶段是冒泡阶段，或者说按文档层次倒序进行，从目标元 素到文档对象（Document object）。

尽管所有的事件都受事件传播的捕获阶段 （capturing phase）的影响，但是并不是所有类型的事件都冒泡，像 “mousedown”这样的一般事件对文档中的其它其他元素是有意义的，所以这些 事件才沿着文档层次向上冒泡，并且触发目标元素的祖元素的相应事件的处理 程序通常情况下，原始的输入事件冒泡，而高级的语义事件不会SVG DOM 常用属性和方法介绍常用属性和方法介绍 2008.09.14 黄凯伟 12.2 SVG DOM 常用属性和方法介绍 Adobe SVG Viewer 提供的属性和方法为准，因为不同解析器对 JavaScript 以及相关的属性和方法支持的程度不同，有些方法和属性是某个解 析器所特有的SVG 支持 DOM2 标准12.2.1 文档初始化相关evt 属性属性evt 表示事件本身，可以通过 evt 获取与当前事件相关的信息，用户可以在 script 中定义响应函数，进行相应的处理它与普通 JavaScript 脚本中的 event 基本相同，只不过在普通 JavaScript 的脚本中简写成“e”ownerDocument 属性属性通过引用该属性获得当前 SVG 文件的文档对象，也就是得到 SVG 的 DOM 结构。

使用举例：svgdoc = evt.target.ownerDocumentgetOwnerDocument()方法方法通过调用该方法获得当前 SVG 文件的文档对象，也就是得到 SVG 的 DOM 结构使用举例：svgdoc = evt.target.getOwnerDocument()target 属性属性通过引用该属性获得事件产生于哪个 SVG 元素，有时可能是该元素的父元 素使用举例：object = evt.targetgetTarget()方法方法通过调用该方法获得事件产生于哪个 SVG 元素，有时可能是该元素的父元 素使用举例：object = evt.getTarget()例程 12-1 获得 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 树，其中根节 点就是文档对象SVG 动画介绍动画介绍 2008.08.29 万里 文章对 SVG 动画属性进行了详细了介绍，首先介绍基本 的 SVG 动画类型： 移动和旋转动画、拉幕和缩放动画、色彩渐变动画、沿路径 动画、顺序与同步动画；之后介绍了内嵌脚本和外。