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的基础形状。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180530G0BSRC00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券