(第六天)HTML5之SVG的了解与使用&Web数据存储

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查看方法
    1. F12打开开发者工具
    2. 打开Application标签
    3. 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查看方法
    1. F12打开开发者工具
    2. 打开Application标签
    3. 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存储
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容