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

svg声明

<?xml version="1.0" encoding="UTF-8" standalone="no"?> // XML 申明
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  // DOCTYPE申明
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">


...
</svg>

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

<ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5" id="rect1">
    <animate attributeName="cx" from="241" to="100" dur="5s" repeatCount="indefinite" />
  </ellipse>

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

animateMotion

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

<ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5">
   <animateMotion path="M 0 0 H 200 Z" dur="3s" repeatCount="indefinite" />
  </ellipse>

animationTransform

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

转圈的loading 效果
<ellipse cx="156" cy="61" rx="30" ry="30" stroke="lightblue" fill="transparent" stroke-width="5" stroke-dasharray="25%,75%">
   <animateTransform
            attributeName="transform"
            begin="0s"
            dur="2s"
            type="rotate"
            from="0 156 61"
            to="360 156 61"
            repeatCount="indefinite" 
            />
  </ellipse>

通过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