亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

慕少3449830 · 更新于 2020-10-10

矢量圖形標記語言

本章介紹用于描述圖像和繪制圖形的標記語言 SVG，SVG 使用 XML 的語法標準，用于繪制和定義矢量圖形，它符合 w3c 的標準。SVG 全稱 scalable vector graphics ，使用它可以繪制三種類型的圖形：矢量圖形、圖像、文本。SVG 是一整套矢量圖形繪制協議，放在 HTML 中也可以是一個標準的 HTML 元素

1. 為什么使用 SVG

SVG 在既能滿足現有圖片的功能的前提下，又是矢量圖，在可訪問性上面也非常不錯，并且有利于 SEO 和無障礙，在性能和維護性方面也比 icon，font 要出色許多，簡單的理解，它是圖形的另一種格式例如它和常見的圖片格式 png、jpg、gif 等是一類。

2. 發展歷史

  • 2001年9月4日，發布 SVG 1.0；
  • 2003年1月4日，發布 SVG 1.1；
  • 2003年1月14日，推出 SVG 移動子版本：SVG Tiny 和 SVG Basic；
  • 2008年12月22日，發布 SVG Tiny 1.2；
  • 2011年8月16日，發布 SVG 1.1 第二版，成為 W3C 目前推薦的標準；
  • W3C 目前仍正在研究制定 SVG 。

3. 語法標簽簡介

3.1 矩形

使用 rect 表示矩形，例如：

實例演示
預覽 復制
復制成功！
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<rect x="60" y="10" rx="10" ry="10" width="150" height="150"/>
</svg>
運行案例 點擊 "運行案例" 可查看在線運行效果

包含6個屬性

  • x 用于表示矩形左上角坐標 x 值；
  • y 用于表示矩形左上角坐標 y 值；
  • width 表示矩形寬度；
  • height 表示矩形高度；
  • rx 用于實現圓角效果的圓角 x 軸半徑；
  • ry 用于實現圓角效果的圓角 y 軸半徑。

3.2 圓形

使用 circle 表示圓形：

實例演示
預覽 復制
復制成功！
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<circle cx="125" cy="175" r="120"/>
</svg>
運行案例 點擊 "運行案例" 可查看在線運行效果

其中包含 3 個屬性

  • r 圓的半徑；
  • cx 圓心坐標 x 值；
  • cy 圓心坐標 y 值。

3.3 橢圓

使用 ellipse 標簽表示橢圓：

實例演示
預覽 復制
復制成功！
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<ellipse cx="175" cy="175" rx="120" ry="50"/>
</svg>
運行案例 點擊 "運行案例" 可查看在線運行效果

其中包含 4 個屬性

  • rx x 半徑；
  • ry y 半徑；
  • cx 圓心坐標 x 值；
  • cy 圓心坐標 y 值。

3.4 直線

使用 line 元素表示直線：

實例演示
預覽 復制
復制成功！
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<line xmlns="http://www.w3.org/2000/svg" x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
運行案例 點擊 "運行案例" 可查看在線運行效果

它包含 4 個屬性

  • x1 起點的 x 坐標；
  • y1 起點的 y 坐標；
  • x2 終點的 x 坐標；
  • y2 終點的 y 坐標。

3.5 折線

使用 polyline 表示折線：

實例演示
預覽 復制
復制成功！
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<polyline points="0,170 484,170 88,440 240,4 391,439 0,170" fill-opacity="0.5" fill="red"></polyline>
</svg>
運行案例 點擊 "運行案例" 可查看在線運行效果

使用 points 屬性表示折線的一系列的中間點：

3.6 路徑

使用 path 表示路徑：

實例演示
預覽 復制
復制成功！
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<path d="M 20 230 Q 40 1205, 150 530 T 90230"/>
</svg>
運行案例 點擊 "運行案例" 可查看在線運行效果

使用這個元素可以實現任何其他圖形。

4. 適用場景和優缺點

和使用圖片相比，SVG 有很多優點：

  • SVG 使用 xml 標記語言實現，具有可移植性；
  • SVG 語法區分大小寫，出現兼容性問題概率較??；
  • SVG 和傳統的 JPEG png 相比，尺寸更??；
  • SVG 是矢量圖，放大或縮小不影響其圖像質量；
  • 可以通過 img 的 src 屬性引用。

總的來說 SVG 擁有很多優點，但是其復雜的語法決定了它的入門門檻較高。

5. 和 Canvas 比較

Canvas 是通過 JavaScript 調用的方式繪制圖像，而 SVG 是使用標簽的方式繪制圖像，所以兩種的渲染方式有很大差別。

6. 使用類庫

直接使用 SVG 來繪制一個較復雜的圖形的話可能入門門檻較高，使用第三方類庫可以節省不少代碼量，在這里推薦一個比較常用的 SVG 的類庫 snap.svg，它的 GitHub 地址是 snap.svg。

實例演示
預覽 復制
復制成功！
<script src="https://wiki-code.oss-cn-beijing.aliyuncs.com/html5/js/snap.svg-min.js"></script>
<svg id="demo1" width="1000" height="1000"></svg>
<script>
let svg = Snap('#demo1');
let circle = svg.select('.circle');  //如果SVG中已有實際圖形元素，直接選擇器初始化

// 1S內矩形圍繞矩形的中心旋轉100次，完成旋轉一周，動畫效果是緩出
let rect = svg.paper.rect({x: 200, y: 200, width: 200, height: 200, fill: '#f00'});

Snap.animate(0, 100, (val) => {
    let m = new Snap.Matrix();
    m.rotate((val/100)*360,  300, 300);  // 注意，旋轉中心是矩形的中心
    rect.transform(m);  // 在rect節點應用matrix
  }, 1000, mina.easeout(), () => {
});
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

上述代碼使用 snap.svg 實現了一個圖形旋轉。

7. 小結

回顧本章介紹了 HTML 中的矢量圖形繪制語言 SVG，已經 SVG 的適用場景以及和 Canvas 的對比。