svg 可缩放矢量图形(Scalable Vector Graphics),是一种用于描述二维的矢量图形,基于 XML 的标记语言。

相对于png/jpg,svg具备以下优点:

  1.  1.矢量图形 ——放大缩小不失真
  2.  2.可编辑 —— 根据需要可直接通过代码修改
  3.  3.尺寸小,可压缩性强

使用方法:

<svg width="100%" height="800">
	<path d="M10 10 L75 10 L75 75" stroke="#333" fill="transparent" />
</svg>

svg基本形状

1.矩形 <rect>

例如:<rect width="100" height="100" x="50" y="100" rx="10" ry="10" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);opacity: 0.5;" />
属性讲解:

  1. width,height 宽高属性
  2. x,y 位置属性
  3. rx,ry 圆角属性
  4. style 样式属性(style可以省略):fill——填充色,stroke——描边色,stroke-width——描边宽度,opacity——透明度

效果:

2.圆形 <circle>

例如:<circle cx="200" cy="200" r="50" stroke="#333" fill="red" opacity="0.2" />
属性讲解:

  1. cx,cy 圆心位置
  2. r 圆半径

效果:

3.椭圆 <ellipse>

例如:<ellipse cx="300" cy="350" rx="200" ry="50" fill="green" />
属性讲解:

  1. cx,cy 圆心位置
  2. rx 椭圆x轴半径,ry 椭圆y轴半径

效果:

4.线 <line>——注意只能有起点终点2个坐标,多个点用路径path或折线polyline

例如:<line x1="0" y1="0"  x2="400" y2="400"  stroke="#333" />
属性讲解:

  1. x1,y1 起点坐标
  2. x2,y2 起点坐标

效果:

5.折线 <polyline>

例如:<polyline points="0,0 50,100 100,300 500,0" stroke="#333"  fill="transparent" />
属性讲解:

  1. points 折线点集合,坐标之间空格分隔
  2. fill="transparent" 填充透明之后,可用来做折线,多线段

效果:

6.多边形 <polygon>

例如:<polygon points="800,0 800,300 800,380 900,0" stroke="red"   />
属性讲解:

  1. 折线polyline不闭合;多边形 polygon会自动闭合路径,形成形状

效果:

7.路径 <path>

例如:<path d="M10 10 L75 10 L75 75 Z" stroke="#333" fill="transparent" /> 
属性讲解: 

  1. d 路径的属性集合,属性字母大写表示绝对定位,小写为相对定位
  2. M|m  moveto —— 画笔移动到起点位置,案例起点位置是(10 10)
  3. L|l  lineto —— 画笔连线到的拐点位置,案例拐点分别为(75,10),(75,75)
  4. H|h  horizontal lineto ——水平线
  5. V|v  vertical lineto ——垂直线
  6. Z|z  closepath —— 闭合路径,起点和最后一个拐点会被连接,形成形状
  7. C|c  curveto ——画弯曲的线
  8. S|s  smooth curveto——画平滑弯曲的线
  9. A|a  elliptical Arc ——画椭圆弧线
  10. Q|q quadratic Belzier curve——画二次方程线
  11. T|t smooth quadratic Belzier curveto ——画平滑二次方程线

效果: