HTML基础 - SVG标签

svg是基于XML语法的图像格式，全称：Scalable Vector Graphics，即可缩放矢量图。

svg图片可以加载。

svg可以绘制基本图形，如：直线、圆形、矩形、多边形、路径等，下面就详细介绍下。

1.绘制线条

语法：，单标签

基本属性：

• x1，起始点x坐标

• y1，起始点y坐标

• x2，结束点x坐标

• y2，结束点y坐标

• stroke-width：定义矩形的边框宽度

• stroke：定义矩形边框的颜色

示例：

1
2
3
4
5

2.绘制矩形

语法：，单标签

属性：

• width：定义矩形宽度

• height：定义矩形高度

• fill：定义矩形的填充颜色

• fill-opacity：定义填充颜色的不透明度，值：0 ~ 1

• stroke-width：定义矩形的边框宽度或轮廓厚度

• stroke：定义矩形边框的颜色

• stroke-opacity：定义描边颜色的不透明度，值：0 ~ 1

• stroke-linecap：笔画笔帽属性，即线条末尾样式，有：butt：没线帽，round：圆形，square：方形

• stroke-dasharray：虚线笔画属性，数字序列如：20，10，
  

• x：起始点x坐标

• y：起始点y坐标

• rx：定义x轴方向的圆角长度

• ry：定义y轴方向的圆角长度

示例：

1
2
3
4

3.绘制圆形

语法：，单标签

属性：

• cx：定义圆形中心的x坐标，默认为坐标原点0

• cy：定义圆形中心的y坐标，默认为坐标原点0

• r：定义圆形的半径

• fill：定义矩形的填充颜色

• fill-opacity：定义填充颜色的不透明度，值：0 ~ 1

• stroke-width：定义矩形的边框宽度

• stroke：定义矩形边框的颜色

• stroke-opacity：定义描边颜色的不透明度，值：0 ~ 1

示例：

1
2
3
4
5

4.绘制椭圆形

语法：，单标签

除了有：fill、stroke、fill-opacity、stroke-width、stroke-opacity属性外，还有属性：

• cx：椭圆中心的x坐标

• cy：椭圆中心的y坐标

• rx：定义椭圆水平半径

• ry：定义椭圆垂直半径

示例：

1
2
3
4
5
6

5.绘制多边形

语法：，单标签

同样有fill、stroke、fill-opacity、stroke-width、stroke-opacity属性外，还有属性：

• points，多边形每个顶点的x,y坐标，形式为：100,20 150,35 160,70

1
2
3
4
5
6
7
8
9
10

6.绘制多线条(折线)

语法：，单标签

属性同，参加上述。

绘制的区域不会进行封闭。

示例：

1
2
3
4
5
6

值得注意：绘制折线默认会有填充色，可通过设置fill属性为none值去掉填充色。

7.绘制文本

基本语法： ，双标签.

属性：

• x，文字起始点左下角x坐标

• y，文字起始点左下角y坐标

• fill，文字颜色

• transform，文字变换，如：rotate、scale

• font-size，文字大小

• text-anchor，对齐方式，可选值有：start、center、end

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

8.绘制路径

基本语法： 单标签

重要属性：

• d，绘制属性（draw的缩写），常用的绘制命令有：

  • M命令，moveto缩写，表示绘制的起点坐标，如：M20 10或M 20 10或M20,10或M 20,10；

  • L命令，lineto的缩写，表示绘制一条直线，如：l50 10或者l 50 10，表示从上一个结束点到(50,10)绘制一条直线；

  • H命令，水平线到

  • V命令，垂直线到

  • C命令，curveto，三次贝塞尔曲线，如：C 150，-300 300,0 50,150 100,200

  • S命令，平滑曲线

  • Q命令，绘制二次贝塞尔曲线，要定义控制点和终点坐标，如：q 150 -300 300 0，表示控制点是(150,-300),终点坐标(300,0)，如图示：

    

  • T命令，光滑二次贝塞尔曲线to

  • A命令，椭圆弧

  • Z命令，closepath闭合路径

命令区分大小写，大写表示绝对定位，小写表示相对定位，如图示：

代码示例：

1
2
3
4
5
6
7
8
9
10
11

9. 标签分组

语法：双标签

含义：使用该标签对绘图元素进行分组，可以在g标签上添加公共属性，如:fill

1
2
3
4
5
6
7
8

10.模糊和阴影效果

模糊

语法：,经常定义在标签defs下

模糊效果：，设置其属性stdDeviation为一个值来实现，值越大越模糊，需要定义在filter标签内部。

1
2
3
4
5
6
7
8
9
10
11
12

阴影

实现：feOffset和feBlend两个滤镜实现。两个均为单标签。

示例：

    
    
         
         
         
         
         
    


1
2
3
4
5
6
7
8
9
10
11
12

11.线性渐变和径向渐变

线性渐变

语法：

属性：

• id，定义了渐变的唯一名称

• x1，渐变的起始x位置,百分比

• y1，渐变的起始y位置,百分比

• x2，渐变的结束x位置,百分比

• y2，渐变的结束y位置,百分比

颜色用单标签stop设置，如：

• offset：定义渐变颜色的开始和结束位置，其值是相对位置的百分比

• stop-color：用于定义渐变的颜色

1
2
3
4
5
6
7
8
9
10
11

径向渐变

语法：双标签

属性有：

• id，定义了渐变的唯一名称

• cx，定义最外面圆x

• cy，定义最外面圆x

• r，定义最外面圆半径

• fx，定义了最里面的圆

• fy，定义了最里面的圆

颜色也是使用stop实现

    
        
        
    


1
2
3
4
5
6
7
8

代码库：https://github.com/zhang-hai/MySummary