2018-07-31 svg声明和svg 动画

打开一个svg文件，有时你会发现在svg标签上方有xml和doctype标签，svg上也有version等属性，有时又没有，那么这些属性到底是不是必须的。现在我们来具体说下这些属性和标签。

svg声明

 // XML 申明
  // DOCTYPE申明

svg上version代表版本， xmlns是命名空间声明， xmlns：xlink是xLink的命名空间声明。

版本

svg是1998年由W3C提出的。
2001.9.4 SVG1.0诞生。
2003.1.14 SVG1.1诞生。
2016.9.15 SVG2到了候选推荐标准（Candidate Recommendation）阶段。

W3C的标准有四个阶段： 1. Working Draft (WD) 2. Candidate Recommendation (CR)
3.Proposed Recommendation (PR)
4.W3C Recommendation (REC)

命名空间

svg是一种XML，所以也遵循XML的规则。XML 中，元素名称是由开发者定义的，当两个不同的文档使用相同的元素名时，就会发生命名冲突。所以通过使用命名空间解决这种冲突。一般会赋予了一个与某个命名空间相关联的限定名称作为前缀。

xmlns:namespace-prefix="namespaceURI"

在最上面的代码段中，使用的是默认的命名空间。这样就不用在xml下所有的子标签前加命名空间。

xmlns="namespaceURI"

svg的两种引用方式

1. svg 作为单独文件

• 去掉DOCTYPE声明
• 看情况保留xml声明。建议保留
• 去掉version属性
• 保留xmlns声明
• 看情况保留xmlns：xlink声明，如果用到xlink一定要加上。建议保留

2. svg代码内嵌到html中

• 去掉DOCTYPE声明
• 去掉xml声明
• 去掉version属性
• 大多数情况下不需要保留xmlns声明，但是写上也没有害处。
• 看情况保留xmlns：xlink声明，如果用到

---

svg 动画

svg支持动画。有两种种方式可以实现：

1. 利用svg的动画标签
2. 利用js控制svg

动画相关标签

1. animate
2. animateMotion
3. animateTransform

animate

在需要加动画效果的元素内部加animate标签。这个元素就可以按照动画设定开始运动了。

属性名	意义
attributeName	进行动画改变的属性名字
from	初始值
to	终点值
dur	动画持续时间

animateMotion

从字面上可以得知，这个和移动有关。给动画主体提供一个行动路径。

属性	意义
path	动画运动轨迹
rotate	随着时间，动画主体随着轨迹的方向如何旋转

animationTransform

这个标签可以控制transform属性的变化

转圈的loading 效果

   
  

属性	意义	默认值
type	动画的属性	translate ， scale ， rotate ，skewX ，skewY。默认值是translate

通过js控制

1. pauseAnimations（）
   这个方法可以暂停动画
2. unpauseAnimations()
   可以再次开始动画
3. animationsPaused()
   判断当前动画是否在暂停状态
4. getCurrentTime()
   返回动画开始时的相对时间。如果动画还没开始，返回0.
5. setCurrentTime()
   调整动画时钟。
6. getIntersectionList()
   返回svg中与提供的长方形重叠的元素。

通过createSVGRect创建长方形作为是否重叠的参考
var r = svg.createSVGRect();
        r.x = 20;
        r.y = 20;
        r.width = r.height = 44;

7. getEnclosureList()
   和上个方法类似，只是这个是返回被长方形覆盖的元素。

8. checkIntersection()
   和上个方法类似，只是这个是返回是否有重叠

9. checkEnclosure()
   和上个方法类似，只是这个是返回是否有覆盖

---

参考：

1. Stuff at the Top of an SVG
2. SVGSVGElement