今天我們開(kāi)始一個(gè)新話(huà)題--SVG。
SVG在前端開(kāi)發(fā)者由其是前端可視化開(kāi)發(fā)者中越來(lái)越重要，圖表、圖形、特效等都可以用它來(lái)實(shí)現(xiàn)。雖然重要，但很多開(kāi)發(fā)者對(duì)它似乎并不太了解，所以我們先從簡(jiǎn)單的基礎(chǔ)說(shuō)起。
SVG是什么
SVG是Scalable Vector Graphics的縮寫(xiě)，即可縮放矢量圖形，也就是說(shuō)它本質(zhì)上是一種數(shù)學(xué)描述，縮小放大時(shí)不會(huì)引起質(zhì)量損失。SVG使用XML標(biāo)記語(yǔ)言，類(lèi)似于HTML，只不過(guò)HTML描述的是文檔結(jié)構(gòu)，而SVG描述的是圖形。同時(shí)現(xiàn)代瀏覽器都支持直接在HTML中嵌入SVG。
SVG包含一些基礎(chǔ)的形狀元素，它們有直線(xiàn)(line)、矩形(rect)、圓(circle)、橢圓(ellipse)、多邊形(polygon)和相對(duì)高級(jí)且最重要的路徑(path)。這些基礎(chǔ)形狀以后我們會(huì)詳細(xì)討論。
SVG怎么用
對(duì)于前端開(kāi)發(fā)而言，SVG最終會(huì)像img元素一樣被嵌入到html中，或者說(shuō)嵌入到DOM結(jié)構(gòu)中。每個(gè)SVG都是由一個(gè) svg 元素包裹著的，所以我們?nèi)绻趙eb頁(yè)面上顯示SVG圖像，就是把 svg 元素嵌入到DOM結(jié)構(gòu)中。當(dāng)然要說(shuō)明的是， svg 并不是普通DOM元素，所以不能簡(jiǎn)單的像對(duì)待HTML元素一樣對(duì)待它。
在HTML中直接嵌入
在HTML中直接嵌入很簡(jiǎn)單，直接像寫(xiě)HTML一樣就可以了，如下
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
...
</svg>
<body>
這樣我們就在body里嵌入了一個(gè)寬600高400的svg元素，只要在 svg 元素中加入基礎(chǔ)形狀等內(nèi)容，就可以繪制出自己想要的圖形了。
原生JS動(dòng)態(tài)創(chuàng)建
有時(shí)我們需要?jiǎng)討B(tài)的生成或修改svg以及其內(nèi)容，方法如下
// 生成svg元素
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
// 設(shè)置width屬性值
svg.setAttribute('width', 600);
// 設(shè)置height屬性值
svg.setAttribute('height', 400);
// 添加到body
document.body.appendChild(svg);
使用d3.js創(chuàng)建
在使用d3.js生成圖表時(shí)svg是經(jīng)常用到的內(nèi)容，d3創(chuàng)建svg元素十分簡(jiǎn)單
d3.select('body') // 選中body元素
.append('svg') // 添加svg元素
.attr('width', 600) // 設(shè)置width屬性值
.attr('height', 400) // 設(shè)置height屬性值
今天我們簡(jiǎn)單地介紹了一下svg，以及在頁(yè)面中使用它的幾種方式。后續(xù)我們會(huì)依次說(shuō)一說(shuō)svg的基礎(chǔ)形狀。
（微信公眾號(hào)var_web同步更新）
