慕少3449830 ·矢量圖形標(biāo)記語(yǔ)言
本章介紹用于描述圖像和繪制圖形的標(biāo)記語(yǔ)言 SVG，SVG 使用 XML 的語(yǔ)法標(biāo)準(zhǔn)，用于繪制和定義矢量圖形，它符合 w3c 的標(biāo)準(zhǔn)。SVG 全稱 scalable vector graphics ，使用它可以繪制三種類型的圖形：矢量圖形、圖像、文本。SVG 是一整套矢量圖形繪制協(xié)議，放在 HTML 中也可以是一個(gè)標(biāo)準(zhǔn)的 HTML 元素
1. 為什么使用 SVG
SVG 在既能滿足現(xiàn)有圖片的功能的前提下，又是矢量圖，在可訪問(wèn)性上面也非常不錯(cuò)，并且有利于 SEO 和無(wú)障礙，在性能和維護(hù)性方面也比 icon，font 要出色許多，簡(jiǎn)單的理解，它是圖形的另一種格式例如它和常見的圖片格式 png、jpg、gif 等是一類。
2. 發(fā)展歷史
- 2001年9月4日，發(fā)布 SVG 1.0；
- 2003年1月4日，發(fā)布 SVG 1.1；
- 2003年1月14日，推出 SVG 移動(dòng)子版本：SVG Tiny 和 SVG Basic；
- 2008年12月22日，發(fā)布 SVG Tiny 1.2；
- 2011年8月16日，發(fā)布 SVG 1.1 第二版，成為 W3C 目前推薦的標(biāo)準(zhǔn)；
- W3C 目前仍正在研究制定 SVG 。
3. 語(yǔ)法標(biāo)簽簡(jiǎn)介
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個(gè)屬性
- x 用于表示矩形左上角坐標(biāo) x 值；
- y 用于表示矩形左上角坐標(biāo) y 值；
- width 表示矩形寬度；
- height 表示矩形高度；
- rx 用于實(shí)現(xiàn)圓角效果的圓角 x 軸半徑；
- ry 用于實(shí)現(xiàn)圓角效果的圓角 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 個(gè)屬性
- r 圓的半徑；
- cx 圓心坐標(biāo) x 值；
- cy 圓心坐標(biāo) y 值。
3.3 橢圓
使用 ellipse 標(biāo)簽表示橢圓：
<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 個(gè)屬性
- rx x 半徑；
- ry y 半徑；
- cx 圓心坐標(biāo) x 值；
- cy 圓心坐標(biāo) 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 個(gè)屬性
- x1 起點(diǎn)的 x 坐標(biāo)；
- y1 起點(diǎn)的 y 坐標(biāo)；
- x2 終點(diǎn)的 x 坐標(biāo)；
- y2 終點(diǎn)的 y 坐標(biāo)。
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 屬性表示折線的一系列的中間點(diǎn)：
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>
使用這個(gè)元素可以實(shí)現(xiàn)任何其他圖形。
4. 適用場(chǎng)景和優(yōu)缺點(diǎn)
和使用圖片相比，SVG 有很多優(yōu)點(diǎn)：
- SVG 使用 xml 標(biāo)記語(yǔ)言實(shí)現(xiàn)，具有可移植性；
- SVG 語(yǔ)法區(qū)分大小寫，出現(xiàn)兼容性問(wèn)題概率較??；
- SVG 和傳統(tǒng)的 JPEG png 相比，尺寸更小；
- SVG 是矢量圖，放大或縮小不影響其圖像質(zhì)量；
- 可以通過(guò) img 的 src 屬性引用。
總的來(lái)說(shuō) SVG 擁有很多優(yōu)點(diǎn)，但是其復(fù)雜的語(yǔ)法決定了它的入門門檻較高。
5. 和 Canvas 比較
Canvas 是通過(guò) JavaScript 調(diào)用的方式繪制圖像，而 SVG 是使用標(biāo)簽的方式繪制圖像，所以兩種的渲染方式有很大差別。
6. 使用類庫(kù)
直接使用 SVG 來(lái)繪制一個(gè)較復(fù)雜的圖形的話可能入門門檻較高，使用第三方類庫(kù)可以節(jié)省不少代碼量，在這里推薦一個(gè)比較常用的 SVG 的類庫(kù) 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中已有實(shí)際圖形元素，直接選擇器初始化
// 1S內(nèi)矩形圍繞矩形的中心旋轉(zhuǎn)100次，完成旋轉(zhuǎn)一周，動(dòng)畫效果是緩出
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); // 注意，旋轉(zhuǎn)中心是矩形的中心
rect.transform(m); // 在rect節(jié)點(diǎn)應(yīng)用matrix
}, 1000, mina.easeout(), () => {
});
</script>
上述代碼使用 snap.svg 實(shí)現(xiàn)了一個(gè)圖形旋轉(zhuǎn)。
7. 小結(jié)
回顧本章介紹了 HTML 中的矢量圖形繪制語(yǔ)言 SVG，已經(jīng) SVG 的適用場(chǎng)景以及和 Canvas 的對(duì)比。
2025 imooc.com All Rights Reserved |