一、介绍

svg是可伸缩矢量图形,图像在放大或改变尺寸的情况下其图形质量不会有所损失(ps:想了解具体的童鞋可去菜鸟教程看哦,地址:https://www.runoob.com/svg/svg-path.html)

二、形状

svg有一些预定义的形状元素:

1、矩形

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; 
stroke-width:5;opacity:0.5"/>
</svg>

(1)rect的元素的width和height属性可以定义矩形的宽和高
(2)style属性用来定义css属性
(3)fill属性定义填充颜色(rgb值、颜色名或者十六进制值)
(4)stroke属性定义边框颜色
(5)stroke-width属性定义矩形边框宽度
(6)opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
(7)rx 和 ry 属性可使矩形产生圆角

2、圆形

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

属性与矩形对应的属性相同
(1)cx和cy属性定义圆点的x,y坐标,如果省略,中心为(0,0)
(2)r属性定义圆的半径

3、椭圆

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

(1)cx属性定义圆点的x坐标
(2)cy属性定义圆点的y坐标
(3)rx属性定义水平半径
(4)ry属性定义垂直半径

4、线

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

(1)x1属性在x轴定义线条的开始
(2)y1属性在y轴定义线条的开始
(3)x2属性在x轴定义线条的结束
(4)y2属性在y轴定义线条的结束

5、折线

<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250"style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>

points属性定义多边形每个角的x和y坐标

6、多边形

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <polyline points="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:white;
stroke:red;stroke-width:2"/>
</svg>

7、路径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

详细去看菜鸟教程,我最常用到的是下面的:
M = moveto
path中的起点,必须存在

L = lineto
画线
Z = closepath
从当前位置到起点画一条直线闭合

8、文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
      <text x="0" y="15" fill="red">I love SVG
          <tspan x="10" y="45">First line</tspan>
          <tspan x="10" y="70">Second line</tspan>
    </text>
  </a>
</svg>

元素作为链接文本

三、属性

1、stroke属性

(1)stroke
属性定义一条线，文本或元素轮廓颜色
(2)stroke-width
属性定义了一条线，文本或元素轮廓厚度
(3)stroke-linecap
属性定义不同类型的开放路径的终结

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

(4)stroke-dasharray
属性用于创建虚线

2、滤镜

不常用,详细在菜鸟教程

3、模糊效果

详细在菜鸟教程

4、阴影

详细在菜鸟教程

5、渐变

详细在菜鸟教程