SVG从入门到起飞1

终于，终于，终于，我们又开始更新了!!!今天我们开始一个新话题--SVGSVG在前端开发者由其是前端可视化开发者中越来越重要，图表、图形、特效等都可以用它来实现。虽然重要，但很多开发者对它似乎并不太了解，所以我们先从简单的基础说起。

SVG是什么

SVG是Scalable Vector Graphics的缩写，即可缩放矢量图形，也就是说它本质上是一种数学描述，缩小放大时不会引起质量损失。SVG使用XML标记语言，类似于HTML，只不过HTML描述的是文档结构，而SVG描述的是图形。同时现代浏览器都支持直接在HTML中嵌入SVG。SVG包含一些基础的形状元素，它们有直线(line)、矩形(rect)、圆(circle)、椭圆(ellipse)、多边形(polygon)和相对高级且最重要的路径(path)。这些基础形状以后我们会详细讨论。SVG怎么用

对于前端开发而言，SVG最终会像img元素一样被嵌入到html中，或者说嵌入到DOM结构中。每个SVG都是由一个svg元素包裹着的，所以我们如果要在web页面上显示SVG图像，就是把svg元素嵌入到DOM结构中。当然要说明的是，svg并不是普通DOM元素，所以不能简单的像对待HTML元素一样对待它。在HTML中直接嵌入

在HTML中直接嵌入很简单，直接像写HTML一样就可以了，如下

...

这样我们就在body里嵌入了一个宽600高400的svg元素，只要在svg元素中加入基础形状等内容，就可以绘制出自己想要的图形了。原生JS动态创建

有时我们需要动态的生成或修改svg以及其内容，方法如下

// 生成svg元素

letsvg=document.createElementNS('http://www.w3.org/2000/svg','svg');

// 设置width属性值

svg.setAttribute('width',600);

// 设置height属性值

svg.setAttribute('height',400);

// 添加到body

document.body.appendChild(svg);

使用d3.js创建

在使用d3.js生成图表时svg是经常用到的内容，d3创建svg元素十分简单

d3.select('body')// 选中body元素

.append('svg')// 添加svg元素

.attr('width',600)// 设置width属性值

.attr('height',400)// 设置height属性值

今天我们简单地介绍了一下svg，以及在页面中使用它的几种方式。后续我们会依次说一说svg的基础形状。