SVG入门 - SVG中国

SVG鼠标事件响应的四种写法

SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式)，根据不同的需要让大家有更多的选择。本文介绍了四种实现SVG鼠标事件的例子。

SVG事件类型总结

　　SVG事件的类型总结，文章对SVG可用的一些事件类型按照事件的类别进行了分类：UIEvents（用户界面事件）、MouseEvents（鼠标事件）、KeyEvents（键盘事件）、SVGEvents（SVG文档事件）、SMILEvents（SMIL动画事件）、MutationEvents（DOM 树变化事件）。

SVG DOM常用属性和方法介绍

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

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

SVG坐标系统与SVG视口(ViewPort)

　　介绍SVG坐标系统与SVG视口(ViewPort)知识，通过SVG坐标与常见的测量坐标系统的比较，让我们了解SVG坐标的特点。SVG中的坐标系统是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成，跟常见的测量坐标系不同的是，SVG的坐标系统的原点在左上角而不是右下角。

SVG动画介绍

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

SVG元素和代码解释

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

SVG ViewBox属性介绍

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

SVG DOM规范

　　什么是SVG DOM规范?SVG DOM遵循DOM1和DOM2，而且完全支持DOM2 Core规范。DOM 2 Core规范中最核心最主要的对象主要有：Node对象、Document对象和Element对象。本文介绍了SVG DOM对象、SVG DOM交互及SVG DOM主要事件等知识。

Adobe SVG Viewer支持的对象

　　Adobe公司提供的Adobe SVG Viewer是最具有代表性的SVG浏览插件。在SVG浏览器上下文环境(context)中，特别是Adobe SVG Viewer中，除了SVG本身作为XML文档所包含的DOM对象外，还包含一些其他对象，这些支持对象对我们也很有帮助。

SVG文档结构

　　SVG文档是以文本形式来表现内容和数据，一个典型的SVG文档总体上包括两部分：序言和文档元素。序言中包含XML声明、处理指令和注释；文档元素中包括各种元素、属性、文本内容、字符和实体引用、CDATA区等。

SVG渲染模型

　　“渲染”就是SVG文本被解释后，在屏蔽上或其他地方被绘制的整个过程，其各种规范构成了渲染模型。任何支持SVG的设备的渲染都必须符合这种规则。规则的具体内容包括绘图规则、渲染顺序、组、元素类型、区域绘制、遮罩和透明度等。这虽然不是入门的内容，可却是SVG严密规范的一个不可缺少的组成部分。如果读者现在看不明白也不要紧，在SVG中国其他的内容有专门的介绍，大家可以通过本站的搜索系统查找。

SVG中的动画技术

　　XML既可单独作为XML文档存在，也可内嵌于网页，同时也可以作为一个外部文件插入网页中。值得注意的是，XML中的内容与表现形式是分开的。

SVG教程