入门博客：阮一峰
MDN

SVG是XML语言的一种形式，有点类似XHTML

语法

  • 如果只想展示svg的一部分，需要指定viewBox属性
  • use标签方便重用
  • g标签用于将多个形状组成一个组，方便复用
  • defs标签用于自定义形状，内部代码不显示，仅供引用
  • fill设置对象内部颜色
  • stroke设置线条颜色
  • text文本

1.坐标定位

  • viewBox

<svg width="200" height="200" viewBox="0 0 100 100">

画布尺寸200 * 200，viewBox定义画布显示区域从起点（0， 0）开始显示100 * 100的区域，放大到 200 * 200的画布上

2.基本形状

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?xml version="1.0" standalone="no"?>
<svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- 
    rect绘制矩形
    x:距离左上角x位置
    y：距离左上角y位置
    width：矩形的宽度
    height：矩形的高度
    rx：圆角的x方位半径
    ry：圆角的y方位半径
   -->
  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <!-- 
    circle绘制圆形
    cx：圆心的x位置
    cy：圆心的y位置
    rx：圆角的x半径
   -->
  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>

  <!-- 
    ellipse绘制椭圆
    rx：椭圆的x半径
    ry：椭圆的y半径
    cx：椭圆中心的x位置
    cy：椭圆中心的y位置
  -->
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <!-- 
    line：绘制直线
   -->
  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>

  <!-- 
    Polyline折线
    points：点集
   -->
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <!-- 
    polygon多边形
  -->
  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>
  <!-- 
    path路径
   -->
  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>