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)、图面更大(或同时满足这二者)时性能更佳 |
什么情况选择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>
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存储