SVG 可缩放矢量图形(Scalable Vector Graphics)。
它是一种用来描述二维矢量图形的 XML 标记语言。
它可以用来在网页中展示和绘制一些特殊图形。
阿里巴巴开源的iconfont库中便有使用。
svg绘制的图形相对与普通图片可以无限缩放不失真。
d3.js是以svg为基础开发的
一、用svg绘制一个矩形
<svg height="500" width="500">
<rect x=10 y=10 height=50 width=100
style="fill:pink;stroke:yellow;stroke-width:2">
</rect>
</svg>
- 定义了一个长高500px的svg绘制区域。
- 绘制了一个高50,宽100的rect(矩形)。
- 设置颜色为pink,边框宽度2,边框颜色yello。
- 从左边(10,10)开始绘制,默认原点为(0,0)。
效果
可以通过 rx,ry设置为圆角矩形
二、用svg绘制一个圆形
<circle cx="250" cy="250" r="100" style="fill:pink;stroke:yellow;stroke-width:2"/>
以(250,250)为圆心,100px为半径画一个圆形
三、用svg绘制一个椭圆形
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
调整rx,ry尺度进行调整
四、绘制一个多边形
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
通过 points 传入一个点数组,svg绘制时将点连接起来,构成图形,按传入的点数量可绘制任意多边形,两个点将连线线。
五、绘制折线
传入一个点数组,svg将连接所有点,注意不用使用颜色填充
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:pink;stroke-width:3" />
六、svg绘制文字
<text x="0" y="30" style="fill:pink;font-size:30">这是一段文字</text>
七、绘制直线
分别定义起始点,结束点的坐标,完成绘制
<line x1="0" y1="0" x2="500" y2="500"
style="stroke:pink;stroke-width:2"/>
八、路径path
表示从点到点的路径
这个比较复杂,点坐标不再是以原点坐标为准,包含坐标修饰符
- M = moveto (移动)
- L = lineto (直线)
- H = horizontal lineto (水平直线)
- V = vertical lineto (垂直直线)
- C = curveto (曲线)
- S = smooth curveto (光滑曲线)
- Q = quadratic Belzier curve (二次Belzier曲线)
- T = smooth quadratic Belzier curveto (光滑二次贝塞尔曲线曲线)
- A = elliptical Arc (圆弧)
- Z = closepath (闭合路径)
坐标修饰符不同 参数也不同
<path d="M250 150 L150 350 L350 350 Z" />
//表示从(250,150) 以直线连接到(150,350)
//再以直线连接到(350,350) 最后闭合
九、SVG图形的常用属性
- x,y 绘制起点
- cr,cy 圆形的圆心
- r,rx,ry 圆的半径,x方向曲度,y方向曲度
- fill 填充色
- points 点数组
- stroke 边框颜色
- font-size 字体大小
- text-anchor = start | middle | end | inherit 文本与绘制点的对齐方式
- stroke-width 边框宽度
还有一些高级用法(滤镜,模糊,阴影…)可以去w3c看文档。