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)是以

(1) 可以 拥有自己的位置属性

即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方式

onclick= \"changeColor(evt)\"/> 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常用属性和方法介绍

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文档被载入后，调用初始化程序，以获得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动画类型：

移动和旋转动画、拉幕和缩放动画、色彩渐变动画、沿路径动画、顺序与同步动画；之后介绍了内嵌脚本和外部脚本的SVG脚本动画。

来源：SVG中国(ChinaSVG.COM)

SVG提供了多种方法来实现各种复杂动画，SVG自身定

义的属性动画是基础，SVG支持的DOM是手段，再加上脚本动态运行，这样无论多么绚丽的动画效果都可以通过SVG基本的属性动画加脚本来完成。 本文章侧重介绍SVG动画属性，你还可以结合“SVG动态与动画”及“SVG动画编程及应用”两篇文章的内容来更详细了解SVG动画知识。

1 SVG属性动画

SVG动画一般通过更改对象属性值来实现。SVG工作组与W3C组织的SYMM(Synchronized MultiMedia WorkingGroup，同步多媒体工作组)合作推出了SVG动画元素的定义规范。SVG中用于定义动画的元素有5个，，，，。其中元素允许数量属性或样式参数随时间而变化，元素可设定非数量属性或样式参数随时间而变化，元素可以沿着指定的路径移动元素以产生动画效果；元素用来设定元素的某些与颜色有关的属性或样式参数随时间而变化；元素可以控制对可视化元素进行坐标变换时的动画效果。

移动和旋转动画

移动和旋转动画可以用元素来实现。

元素用于可视化元素的动态坐标变换，其主要属性除通用属性外还有两个attributeName和type，其中attributeName属性值必须指明为’'transform\"，type属性指明动态坐标变化的类型，其值可以为\"translate\"(表示平移变换)、\"scale\"(表示拉伸变换)、\"rotate\"(表示旋转变换)、\"skewX\"，及”skewY\"(表示沿X和Y方向上的歪斜变换)。

拉幕和缩放动画

拉幕和缩放动画都是对图形对象的宽度和高度进行改变而引起的动画效果，可以用元素来实现，利用from和to属性来定义图形的起始和终止值。元素没有其特有的属性。

色彩渐变动画

色彩渐变动画是由对象的填充色彩变化而引起的动画效果，可以用

元素来实现。元素也没有其特有的属性，只是在使用from，to，by和values等属性时，其属性值必须是颜色值。

沿路径动画

沿路径动画是指对象沿一定的路径移动，可以用SVG的元素来实现。除了通用属性外，元素还具有path、rotate及keyPoints属性，其中path指明动画路径，rotate指明可视化元素在沿着路径运动过程中是否随路径而转动，keyPoints表示各个关键点所在的位置在路径方向上与路径起点间的距离，它和key-Times属性共同决定一系列关键点以精确控制路径动画中时间与运动路程的关系。

顺序与同步动画

同步动画就是多个对象同时进行动作，顺序动画则是根据时间上的先后顺序进行动作。两种动画根据不同的动画类型可以映射为不同的SVG动画元素，最关键的地方在于动画元素中的begin属性值的设定。设置动画顺序通常要将动画元素的id和begin属性值结合起来，如果第二个对象动画(id=\"anim1\")在第一个对象动画(id=\"anim2)结束后2秒才开始，那么可以设置第二个动画的begin属性为’'animl.end+2s\"，如果是同步动画则设置为’'animl.begin\"。

2 SVG脚本动画

SVG标准允许将JavaScript脚本代码以两种方式来实现:一个是内嵌脚本方式；另一个是外部脚本方式。

内嵌脚本

元素内嵌脚本属性type=\"contentype”用MIME的方式指明所用的Script语言的类型。

外部脚本

SVG文档结构主要包含以下几个方面：

1 XML声明

所有SVG文档都必须是一个XML文档，所以每个SVG文档首行必须有一个XML声明。XML声明是以下面的内容符合XML语法。XML声明可以包含version、encoding和standalone三个属性。version属性必须有而且必须是第一个属性，它指明文档遵循哪个版本的XML。encoding属性指明文档字符使用的编码标准，SVG可以用

UTF-8,UTF-16和iso-8859-1三种编码标准。standalone属性表明文档是否和一个外部的文档类型定义文档配套使用。

2 文档类型声明

文档类型声明(Document Type Declaration)指出两件事情：跟随的XML数据的根元素、标识；用于解析XML的DTD的位置。

\"htip://www.w3.org/Graphics/SVG/I.I/DTD/svg11-flat-20030114.dtd'，提供了解析XML的DTD的URL地址。DTD包括一系列标记、attributes和

properties，用于标记文档的内容，DTD还包括一些规则，规定了哪些标记能出现在其他哪些标记中。假如SVG文档中的标记不遵循所指定的DTD的规则的话，那么这个文档将不能通过校验，也无法在程序中正确处理。

3 SVG元素

接下来，SVG文档的所有SVG元素、标记和数据都将放在根元素

上面的示例SVG文档包含了8个元素，其中