SVG 基础知识汇总

容器元素：将不同的元素组合起来使用。

   defs:预定义将要使用的元素集合，接下来要使用这个集合，通常和use结合起来使用。

   g：将相关的元素图形组合起来，形成一个整体。

图形引用元素：用对不同的文档或元素的引用作为其图形内容的图形元素。

   image:用于将其他图像的文件内容包括在一个已定义的矩形中。

   use：与defs元素配合使用，来实例化前面定义但是还没有表现的图形对象。

文本内容：是一个可以定义文本串的画在画布上的SVG元素。

  主要的文本元素有text，tspan，tref，textPath,altGlyph

SVG文档片段（SVG document fragment）是以svg元素开头的XML文档子树。svg文档片段相对于g有一些特别有用的属性：1：可以拥有自己的位置属性    2：可以拥有自己的高宽属性   3:可以拥有自己的显现属性

svg鼠标响应的四种写法

1.SMIL方式

<svg>

<rect x="15" y="15" width="40" height="40" fill="red">

<set attributeName="fill" to="blue"   begin="click"/>

</rect>

</svg>

2.属性的书写方式

<svg xmlns="http://www.w3.org/2000/svg"

       xmlns:xlink=http://www.w3.org/1999/xlink

       xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"

       a3:scriptImplementation="Adobe">

       <script type="text/ecmascript" a3:scriptImplementation="Adobe">

       <![CDATA[

       function changeColor(evt)

       {

           var rect = evt.target;

           rect.setAttributeNS(null, "fill", "blue")

       }

       ]]></script>

       <rect x="5" y="5" width="40" height="40"

       fill="red"

        οnclick= "changeColor(evt)"/> u

</svg>

3.javascript+smil方式

<svg οnlοad="makeShape(evt)">

<script><![CDATA[

var svgns = "http://www.w3.org/2000/svg";u

function makeShape(evt) {

svgDoc = evt.target.ownerDocument;

var rect = svgDoc.createElementNS(svgns, "rect");v

rect.setAttributeNS(null, "x", "5");

rect.setAttributeNS(null, "y", "5");

rect.setAttributeNS(null, "width", "40");

rect.setAttributeNS(null, "height", "40");

rect.setAttributeNS(null, "fill", "red");

var set = svgDoc.createElementNS(svgns, "set");

set.setAttributeNS(null, "attributeName", "fill");

set.setAttributeNS(null, "to", "blue");

set.setAttributeNS(null, "begin", "click");

rect.appendChild(set);

svgDoc.rootElement.appendChild(rect);

}

]]></script>

</svg>

　　这个例子没有图形元素的事先定义，所有定义都是通过脚本完成的，包括事件的定义也都是动态脚本完成的，最后在内存中的SVG DOM机构与例程1是类似的。例程3中，v处的“createElementNS”方法，有了一个后缀“NS”是需要添加命名空间参数的，这里的命名空间定义在u处。

4 EventListener方式

<svg οnlοad="makeShape(evt)">

<script><![CDATA[

var svgns = "http://www.w3.org/2000/svg";

function makeShape(evt) {

if ( window.svgDocument == null )

svgDoc = evt.target.ownerDocument;

var rect = svgDoc.createElementNS(svgns, "rect");

rect.setAttributeNS(null, "x", 15);

rect.setAttributeNS(null, "y", 15);

rect.setAttributeNS(null, "width", 40);

rect.setAttributeNS(null, "height", 40);

rect.setAttributeNS(null, "fill", "red");

rect.addEventListener("click", changeColor, false); u

svgDoc.documentElement.appendChild(rect);

}

function changeColor(evt) {

var target = evt.target;

target.setAttributeNS(null, "fill", "blue");

}

]]></script>

</svg>

　　这种方法也是经常用到的，W3C为是DOM元素绑定事件处理函数唯一真正的标准方式。原理就是使用“addEventListener”方法来注册事件方法，而且一次性可以很方便地注册很多事件，“EventListener”被称为“事件监听器”。 “addEventListener”这个方法的参数依次是：事件的名称（如：click）、处理该事件的函数名和是否启用事件捕获的布尔量（一般是false）。

　　例程4中，u处调用了“addEventListener”方法来注册“onclick”事件，事件处理函数是“changeColor”。值得注意的是写在参数里的事件名称，要去掉“on””，所以填写的是“click”，而不是“onclick”。

。

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

文档初始化相关的api

 

evt:表示事件本身，可以通过evt获取与当前事件相关的信息。用户可以在javascript中定义响应函数，进行处理。

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

getOwnerDocument()：获取当前节点的文档对象，即SVG的DOM结构。

target:通过该属性获取事件产生于那个SVG元素，有时可能是该元素的父元素。

getTarget():调用该方法获取事件产生于那个SVG元素，有时有可能是该元素的父元素。

svg动画：

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

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

SVG允许js脚本以两种方式来实现：一种是内嵌脚本代码，另一种是外部脚本方式。

内嵌脚本就是使用下面的形式：

<script type="text/javascript"><![CDATA[

<!一此处插入脚本程序段一 >

]]</script>

外部脚本的引入方式：<script>元素的外部脚本属性xlink:href="/<uri>"指明一个引用外部脚本文件的URL。SVG的外部脚本中不能使用中文，注视最好也不要使用中文。

SVG  ViewBox介绍

视口初始化后的两个坐标系是一致的，如果我们定义的SVG图形太大或者太不了，就可以使用“ViewBox“属性，重新定义视口的坐标范围，从而使默认的坐标度量单位也会随着改变。“ViewBox”属性的4个参数分别对应的是：左上角X坐标、左上角Y坐标、ViewBox的宽度和ViewBox的高度。请看下面这个<svg>元素的定义：

<svg width="3cm" height="3cm" viewBox="0 0 300 300">

　　如果没有定义“ViewBox”属性，那么视口宽度是3厘米，但是定义中出现了“ViewBox”属性，重新定义了坐标范围至(0 0 300 300)，那么默认的用户坐标系度量单位试不是0.01cm。也可以理解成把客户端(0，0)到(300，300)区域内的图形都放到SVG定义的3cm×3cm的矩形区域内，那么SVG的3cm到了客户端就相当于被300个像素“瓜分”，每个像素分到0.01cm。

SVG动画元素的详解

• animate：是动画元素，定义要进行变化的各种属性。 

• xlink:href：指定要进行动画的元素名称，是一个uri地址。要进行动画的元素必须是当前SVG文档中出现的元素，uri必须指定一个具有动画能力的元素，如果指定的元素不止一个，或者指定的元素没有进行动画的能力，则会产生错误；如果没有uri属性的话，要进行动画的元素就是当前动画元素的最接近的父元素。 

• attributeName：指定要进行动画变化的属性名称，可根据实际情况带上XML的名称空间。 

• attributeType：指定要变化的属性和属性值在什么名称空间里定义。可有三种选择之一：CSS、XML、auto。“CSS”指定 attributeName的值是CSS属性的名字；“XML”指定attributeName的值是默认XML名称空间里定义的XML属性名；“auto”是默认值，首先搜索CSS属性列表看能否匹配attributeName，如果不能找到匹配的值，则寻找该元素的缺省XML名称空间 。 

• begin：指定元素何时进行动画。可以取的值有： offset-value、syncbase-value、event-value、repeat- value、accessKey-value、wallclock-sync-value、"indefinite" ，offset-value是相对于文档开始的时间，不能为负值；syncbase-value是相对于另外动画元素的同步时间，必须包含另外元素的id值；event-value是由事件触发；repeat-value是重复事件，元素动画开始时间是相对于重复事件触发的时间；accessKey-value是指相对于用户的键盘输入的时间；wallclock-sync-value是现实世界中的时间；indefinite是由beginElement()的调用或被链接到该元素决定是否开始动画。该属性如果同时选择多个值的话，要以分号“;”隔开。 

• dur：指定动画的持续时间。可以取下面三者之一：大于0的数值、media和indefinite。该属性值缺省为indefinite，即无限长。 

• end：指定动画结束的时间。与begin的取值方法类似。 

• fill：指动画后的填充状态。取下面二者之一：remove和freeze。remove表示不保留动画结束时的状态；freeze表示保留动画结束时的状态。缺省为remove。 

• from：指定动画开始时的属性值。 

• to：指定动画结束时的属性值。 

• additive：指定动画是否是在原来的基础上进行的。取sum和replace二者之一，默认为replace。 

• accumulate：指定动画是否是在前一次动画的基础上进行累加的。取sum和none二者之一，默认为none

另外，还有min（动画持续的最小时间）、max（动画持续的最大时间）、restart（动画重新开始的时间，取always、 whenNotActive和never之一）、repeatCount（动画重复的时间）和repeatDur（所有重复的持续时间）。时间的格式可以是02:10:13、20:10:10.25、10.5s、00:00.005、12.467、5ms、3.2h等，但里面不能包含空格，头尾有空格时将被忽略。