SVG
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG与Canvas如何选择？
理解以下内容让你更快的明白如何选择使用SVG or Canvas
| Canvas | SVG |
|---|---|
| 基于像素（动态 .png） | 基于形状 |
| 单个 HTML 元素 | 多个图形元素，这些元素成为 DOM 的一部分 |
| 仅通过脚本修改 | 通过脚本和 CSS 修改 |
| 事件模型/用户交互颗粒化 (x,y) | 事件模型/用户交互抽象化 (rect, path) |
| 图面较小时、对象数量较大 (>10k)（或同时满足这二者）时性能更佳 | 对象数量较小 (<10k)、图面更大（或同时满足这二者）时性能更佳 |
Canvas与SVG在不同情况下的性能比较
根据需求选择
什么情况选择SVG更好（举例）？
- 图表和图形（选择SVG）
需要矢量图形的图表和图形的谱表很宽广。大部分这些图形最好使用 SVG 进行创建，因为它们具有下列三个特征之一：- 图形是从可以轻松转换为 XML (SVG) 的现有数据生成的
- 它们需要用户交互
- 优点是可在网页上设置样式
我们使用可显著增加方案范围的交互功能来扩展高保真文档方案。 其中包括：
- 交互的组织结构图和流程图
- 数据图（环形图、条形图、散点图）
- 交互式地图 - 路径查找
- 建筑图、工程图和楼层图
- 航班或音乐厅的座位图
SVG如何使用？
- 方法一：在文档中直接绘制svg图片，使用svg标签
<svg></svg> - 方法二：在文档中通过img标签引入xx.svg图片；svg图片支持文本编辑，须符合xml编码规范；
设计师与前端工程师
一般情况下，设计师可以通过Adobe Illustrator之类的设计软件设计并制作好SVG图片，而前端工程师拿到SVG之后可以直接实现到网页。
SVG元素之viewBox属性的介绍
-
viewBox属性的功能
viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素（如svg元素）；即如果使用了该属性，svg中的子元素只有在该属性的范围中才会被显示，并将范围内的子元素拉伸适应到父元素。若父元素(svg)等比例拉伸，那么"显示部分"的子元素也会等比例自适应；若父元素(svg)不等比例拉伸，那么除"显示部分"外，子元素未显示部分也会随着拉伸方向慢慢出现（该方向上的"原本未显示的部分"） -
viewBox属性的四个参数
viewBox(min-x,min-y,width,height)- min-x：容器元素的起始点x轴坐标
- min-y：容器元素的起始点y轴坐标
- width：以min-x作为起始点，图形的宽度
- height：以min-y作为起始点，图形的高度
代码示例
<head>
<meta charset="UTF-8">
<title>svg</title>
<style>
.viewBox {
transition: width 5s, height 5s;
}
.viewBox:hover {
width: 400px;
height: 300px;
}
.diff:hover {
height: 30px;
}
</style>
</head>
<body>
<h3>直接在页面中绘制svg</h3>
<!-- 直接在页面中绘制SVG -->
<!-- svg的width与height属性决定了svg的范围，里面的元素如果超出,则无法显示
svg可以使用css样式-->
<svg width="50" height="50" style="border: 1px solid #f00;">
<!--绘制一个圆心坐标50,50 半径30px的圆-->
<circle cx="50" cy="50" r="30"/>
<circle cx="10" cy="10" r="10"/>
</svg>
<h3>svg没有viewBox属性的情况(下方两种情况的原始状态)</h3>
<!--没有设置viewBox的情况-->
<svg width="40" height="30" style="border: 1px solid #f00;">
<!--viewBox就像是在svg上画了一个起点为0,0宽高为2,2的矩形，在此矩形
中的子元素会被拉伸填充到svg中；-->
<circle cx="5" cy="5" r="5"/>
</svg>
<h3>svg有viewBox属性，svg被等比例拉伸的情况</h3>
<!--viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
viewBox四个属性：startX,startY,width,height
等比例动态拉伸效果可将鼠标放到该元素上查看-->
<svg class="viewBox" viewBox="0 0 2 2" width="40" height="30" style="border: 1px solid #f00;">
<!--viewBox就像是在svg上画了一个起点为0,0宽高为2,2的矩形，在此矩形
中的子元素会被拉伸填充到svg中,此矩形范围外的子元素不显示，除非svg被不等比例拉伸；-->
<circle cx="5" cy="5" r="5"/>
</svg>
<h3>svg有viewBox属性，svg被不等比例拉伸的情况</h3>
<!--不等比例动态拉伸效果-->
<svg class="viewBox diff" viewBox="0 0 2 2" width="40" height="30" style="border: 1px solid #f00;">
<circle cx="5" cy="5" r="5"/>
</svg>
<h3>通过使用img调用svg图片</h3>
<!-- 调用svg图片 -->
<img src="circle2.svg" alt="" height="120" width="120">
</body>
上述代码示例整体效果图
svg等比例拉伸效果图
svg不等比例拉伸效果图
Web数据存储
localStorage(本地式存储)
- 有效时间：只要不人为删除存储的数据，则数据永久保存
- 数据结构：key:value
-
使用方法：
- 添加存储数据：
localStorage.setItem("key","value")或localStorage.key = value - 获取存储数据：
localStorage.getItem("key")或localStorage.key - 删除已存数据：
localStorage.removeItem("key") - 清空所有数据：
localStorage.clear()
- 添加存储数据：
-
Chrome查看方法：
- F12打开开发者工具
- 打开Application标签
- Application - Storage - localStorage 各个网站的localStorage信息都可在这里查看
- 代码示例：
<body>
<script>
"use stract"
window.onload = function(ev) {
var ta = document.getElementById("ta");
var save = document.getElementById("save");
var remove = document.getElementById("remove")
// localStorage以键值对的结构储存数据，所以可以通过.prop直接读取、添加；
if (localStorage.txt) { //判断是否存在txt这个key
//getItem、setItem、removeItem是标准用法，也可以直接通过.txt获取value
ta.value = localStorage.getItem("txt");
}
// 保存监听
save.onclick = function(ev) {
// 往localStorage中添加一个key为txt的值
localStorage.setItem("txt", ta.value);
// localStorage.txt = ta.value;
}
// 移除监听
remove.onclick = function(ev) {
// 清空localStorage
// localStorage.clear();
// 删除key为txt的item，若不存在txt的key，不会报错
localStorage.removeItem("txt");
// 此方法并未删除txt这个数据，只是将key为txt的项改为空了而已
// localStorage.txt = "";
}
}
</script>
<textarea id="ta" cols="30" rows="10"></textarea>
<button id="save">保存</button>
<button id="remove">删除</button>
</body>
sessionStorage(会话式存储)
- 有效时间：由session生命周期决定，一个tab一个session；关闭tab后当前session的生命周期结束，一直开着tab时，生命周期由服务端设置决定。<small>tab表示浏览器的一个窗口</small>
- 数据结构：key:value
-
使用方法：
- 添加存储数据：
sessionStorage.setItem("key","value")或sessionStorage.key = value - 获取存储数据：
sessionStorage.getItem("key")或sessionStorage.key - 删除已存数据：
sessionStorage.removeItem("key") - 清空所有数据：
sessionStorage.clear()
- 添加存储数据：
-
Chrome查看方法：
- F12打开开发者工具
- 打开Application标签
- Application - Storage - sessionStorage 各个网站的sessionStorage信息都可在这里查看
- 代码示例：
<body>
<label for="btn" id="label">0
<input id="btn" type="button" value="增加">
</label>
<script>
"use strict"
var label = document.getElementById("label");
// 获取label中的第一个子元素，即btn
var btn = label.control;
var num = 0;
console.log("label的子节点总数：" + label.childNodes.length + " 第一个子节点的值：" + label.childNodes[0].data);
// 判断sessionStorage里面是否存有key为num的值
if (sessionStorage.num) {
// 若存在，则将label第一个子节点的data和num的起始值修改为key为num的值；
// + " "是为了值与按钮之间一个空格,数字+空格在运算的时候会自动转换，如果加字符，会显示NaN+字符的结果；
label.childNodes[0].data = num = sessionStorage.num + " ";
}
//点击事件
btn.onclick = function(ev) {
num++;
// 更新data和key为num的值为num
label.childNodes[0].data = sessionStorage.num = num + " ";
console.log("label的值为：" + label.childNodes[0].data);
}
</script>
</body>
localStorage与sessionStorage的区别
- 有效时间不同
- localStorage：永久<small>（不考虑人为删除情况）</small>
- sessionStorage：浏览器关闭或session生命周期结束
- 存储数据的所属对象不同：
- localStorage根据web存储
- sessionStorage根据web及session存储
