SVG
什么是SVG伴挚？
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
- SVG 是萬維網(wǎng)聯(lián)盟的標準
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
SVG與Canvas如何選擇熊楼？
理解以下內(nèi)容讓你更快的明白如何選擇使用SVG or Canvas
| Canvas | SVG |
|---|---|
| 基于像素（動態(tài) .png） | 基于形狀 |
| 單個 HTML 元素 | 多個圖形元素，這些元素成為 DOM 的一部分 |
| 僅通過腳本修改 | 通過腳本和 CSS 修改 |
| 事件模型/用戶交互顆廖蹇澹化 (x,y) | 事件模型/用戶交互抽象化 (rect, path) |
| 圖面較小時、對象數(shù)量較大 (>10k)（或同時滿足這二者）時性能更佳 | 對象數(shù)量較小 (<10k)、圖面更大（或同時滿足這二者）時性能更佳 |
Canvas與SVG在不同情況下的性能比較
根據(jù)需求選擇
什么情況選擇SVG更好（舉例）王带？
- 圖表和圖形（選擇SVG）
需要矢量圖形的圖表和圖形的譜表很寬廣外永。大部分這些圖形最好使用 SVG 進行創(chuàng)建剩失，因為它們具有下列三個特征之一：- 圖形是從可以輕松轉(zhuǎn)換為 XML (SVG) 的現(xiàn)有數(shù)據(jù)生成的
- 它們需要用戶交互
- 優(yōu)點是可在網(wǎng)頁上設(shè)置樣式
我們使用可顯著增加方案范圍的交互功能來擴展高保真文檔方案。 其中包括：
- 交互的組織結(jié)構(gòu)圖和流程圖
- 數(shù)據(jù)圖（環(huán)形圖刹衫、條形圖斟冕、散點圖）
- 交互式地圖 - 路徑查找
- 建筑圖口糕、工程圖和樓層圖
- 航班或音樂廳的座位圖
SVG如何使用？
- 方法一：在文檔中直接繪制svg圖片磕蛇，使用svg標簽
<svg></svg> - 方法二：在文檔中通過img標簽引入xx.svg圖片景描；svg圖片支持文本編輯，須符合xml編碼規(guī)范秀撇；
設(shè)計師與前端工程師
一般情況下超棺，設(shè)計師可以通過Adobe Illustrator之類的設(shè)計軟件設(shè)計并制作好SVG圖片，而前端工程師拿到SVG之后可以直接實現(xiàn)到網(wǎng)頁呵燕。
SVG元素之viewBox屬性的介紹
-
viewBox屬性的功能
viewBox屬性允許指定一個給定的一組圖形伸展以適應(yīng)特定的容器元素（如svg元素）棠绘；即如果使用了該屬性，svg中的子元素只有在該屬性的范圍中才會被顯示再扭，并將范圍內(nèi)的子元素拉伸適應(yīng)到父元素氧苍。若父元素(svg)等比例拉伸，那么"顯示部分"的子元素也會等比例自適應(yīng)泛范；若父元素(svg)不等比例拉伸让虐，那么除"顯示部分"外，子元素未顯示部分也會隨著拉伸方向慢慢出現(xiàn)（該方向上的"原本未顯示的部分"） -
viewBox屬性的四個參數(shù)
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屬性的情況(下方兩種情況的原始狀態(tài))</h3>
<!--沒有設(shè)置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屬性允許指定一個給定的一組圖形伸展以適應(yīng)特定的容器元素惧笛。
viewBox四個屬性：startX,startY,width,height
等比例動態(tài)拉伸效果可將鼠標放到該元素上查看-->
<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>
<!--不等比例動態(tài)拉伸效果-->
<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調(diào)用svg圖片</h3>
<!-- 調(diào)用svg圖片 -->
<img src="circle2.svg" alt="" height="120" width="120">
</body>
上述代碼示例整體效果圖
svg等比例拉伸效果圖
svg不等比例拉伸效果圖
Web數(shù)據(jù)存儲
localStorage(本地式存儲)
- 有效時間：只要不人為刪除存儲的數(shù)據(jù)，則數(shù)據(jù)永久保存
- 數(shù)據(jù)結(jié)構(gòu)：key:value
-
使用方法：
- 添加存儲數(shù)據(jù)：
localStorage.setItem("key","value")或localStorage.key = value - 獲取存儲數(shù)據(jù)：
localStorage.getItem("key")或localStorage.key - 刪除已存數(shù)據(jù)：
localStorage.removeItem("key") - 清空所有數(shù)據(jù)：
localStorage.clear()
- 添加存儲數(shù)據(jù)：
-
Chrome查看方法：
- F12打開開發(fā)者工具
- 打開Application標簽
- Application - Storage - localStorage 各個網(wǎng)站的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以鍵值對的結(jié)構(gòu)儲存數(shù)據(jù)各谚，所以可以通過.prop直接讀取紧憾、添加；
if (localStorage.txt) { //判斷是否存在txt這個key
//getItem昌渤、setItem赴穗、removeItem是標準用法，也可以直接通過.txt獲取value
ta.value = localStorage.getItem("txt");
}
// 保存監(jiān)聽
save.onclick = function(ev) {
// 往localStorage中添加一個key為txt的值
localStorage.setItem("txt", ta.value);
// localStorage.txt = ta.value;
}
// 移除監(jiān)聽
remove.onclick = function(ev) {
// 清空localStorage
// localStorage.clear();
// 刪除key為txt的item，若不存在txt的key般眉，不會報錯
localStorage.removeItem("txt");
// 此方法并未刪除txt這個數(shù)據(jù)了赵，只是將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甸赃；關(guān)閉tab后當前session的生命周期結(jié)束柿汛，一直開著tab時，生命周期由服務(wù)端設(shè)置決定埠对。<small>tab表示瀏覽器的一個窗口</small>
- 數(shù)據(jù)結(jié)構(gòu)：key:value
-
使用方法：
- 添加存儲數(shù)據(jù)：
sessionStorage.setItem("key","value")或sessionStorage.key = value - 獲取存儲數(shù)據(jù)：
sessionStorage.getItem("key")或sessionStorage.key - 刪除已存數(shù)據(jù)：
sessionStorage.removeItem("key") - 清空所有數(shù)據(jù)：
sessionStorage.clear()
- 添加存儲數(shù)據(jù)：
-
Chrome查看方法：
- F12打開開發(fā)者工具
- 打開Application標簽
- Application - Storage - sessionStorage 各個網(wǎng)站的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的子節(jié)點總數(shù)：" + label.childNodes.length + " 第一個子節(jié)點的值：" + label.childNodes[0].data);
// 判斷sessionStorage里面是否存有key為num的值
if (sessionStorage.num) {
// 若存在，則將label第一個子節(jié)點的data和num的起始值修改為key為num的值项玛；
// + " "是為了值與按鈕之間一個空格,數(shù)字+空格在運算的時候會自動轉(zhuǎn)換貌笨，如果加字符，會顯示NaN+字符的結(jié)果稍计；
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的區(qū)別
- 有效時間不同
- localStorage：永久<small>（不考慮人為刪除情況）</small>
- sessionStorage：瀏覽器關(guān)閉或session生命周期結(jié)束
- 存儲數(shù)據(jù)的所屬對象不同：
- localStorage根據(jù)web存儲
- sessionStorage根據(jù)web及session存儲
