打开一个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的两种引用方式
- svg 作为单独文件
- 去掉DOCTYPE声明
看情况保留xml声明。建议保留- 去掉version属性
保留xmlns声明- 看情况保留xmlns：xlink声明，如果用到xlink一定要加上。建议保留
- svg代码内嵌到html中
- 去掉DOCTYPE声明
去掉xml声明- 去掉version属性
大多数情况下不需要保留xmlns声明，但是写上也没有害处。- 看情况保留xmlns：xlink声明，如果用到
svg 动画
svg支持动画。有两种种方式可以实现：
- 利用svg的动画标签
- 利用js控制svg
动画相关标签
- animate
- animateMotion
- 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标签。这个元素就可以按照动画设定开始运动了。
| 属性名 | 意义 |
|---|---|
| attributeName | 进行动画改变的属性名字 |
| from | 初始值 |
| to | 终点值 |
| dur | 动画持续时间 |
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>
| 属性 | 意义 |
|---|---|
| path | 动画运动轨迹 |
| rotate | 随着时间，动画主体随着轨迹的方向如何旋转 |
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>
| 属性 | 意义 | 默认值 |
|---|---|---|
| type | 动画的属性 | translate ， scale ， rotate ，skewX ，skewY。默认值是translate |
通过js控制
- pauseAnimations（）
这个方法可以暂停动画 - unpauseAnimations()
可以再次开始动画 - animationsPaused()
判断当前动画是否在暂停状态 - getCurrentTime()
返回动画开始时的相对时间。如果动画还没开始，返回0. - setCurrentTime()
调整动画时钟。 - getIntersectionList()
返回svg中与提供的长方形重叠的元素。
通过createSVGRect创建长方形作为是否重叠的参考
var r = svg.createSVGRect();
r.x = 20;
r.y = 20;
r.width = r.height = 44;
-
getEnclosureList()
和上个方法类似，只是这个是返回被长方形覆盖的元素。 -
checkIntersection()
和上个方法类似，只是这个是返回是否有重叠 -
checkEnclosure()
和上个方法类似，只是这个是返回是否有覆盖
参考：
网友评论