svg 保姆级入门教程

一、svg 绘制矩形

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    svg{
      background: #e9e9e9;
    }
  </style>
</head>
<body>
  <svg>
    <rect x="0" y="0" width="100" height="100"></rect>
  </svg>
</body>
</html>

效果如下:

由以上可以看出：

svg 绘制一个矩形需要在svg 标签里面添加rect标签
rect 中的x,y 代表的是矩形的左上角顶点的坐标，这个坐标是相对于svg标签的
width, height 分别代表的是矩形的宽度和高度
绘制出来的矩形是填充满背景色的，且为黑色
svg 标签默认会有一个默认的宽高，350，150

如果想修改svg的宽高，直接在svg标签上添加宽高属性即可：

html 复制代码

<svg width="500" height="500">
  <rect x="0" y="0" width="100" height="100"></rect>
</svg>

绘制空心的矩形：

html 复制代码

<svg width="500" height="500">
      <rect
        x="10"
        y="10"
        width="100"
        height="100"
        fill="transparent"
        stroke-width="1"
        stroke="#409EFF"
      ></rect>
    </svg>

以上代码可以看到绘制空心的矩形需要：

stroke 画笔的颜色
stroke-width 画笔的宽度
fill 的属性值需要设置为transparent 或者none

绘制圆角的矩形：

html 复制代码

<svg width="500" height="500">
      <rect
        x="10"
        y="10"
        width="100"
        height="100"
        fill="transparent"
        stroke-width="1"
        stroke="#409EFF"
        ry="10"
        rx="10"
      ></rect>
    </svg>

效果：

由上面代码可以看出给矩形添加圆角：

添加rx,ry属性即可，分别代表x方向的圆角和y方向的圆角
注意点：当只写一个时，默认和另一个相等，比如说，只写rx="10",那么ry也等于10

二、 svg 绘制圆形

html 复制代码

<svg width="500" height="500">
  <circle cx="100" cy="100" r="50"></circle>
</svg>

效果：

可以看到svg 绘制圆形：

在svg内添加circle标签
在标签上添加cx 和cy 属性，代表圆心的位置坐标
r 表示圆形的半径
和矩形一样默认绘制出来的是填充背景颜色为黑色的圆形
如果想改成其他背景，添加fill属性即可，例想要背景为红色，添加fill="#f00"

绘制空心的圆形：

html 复制代码

<svg width="500" height="500">
  <circle
    cx="100"
    cy="100"
    r="50"
    fill="transparent"
    stroke="#f00"
    stroke-width="2"
  ></circle>
</svg>

和矩形一样绘制空心的需要添加fill属性，stroke属性，stroke-width属性，意思和矩形中的意思一样，不再做解释

三、svg 绘制椭圆形

html 复制代码

<svg width="500" height="500">
  <ellipse cx="200" cy="200" rx="200" ry="100"></ellipse>
</svg>

效果如下：

由上面代码可以看出svg 绘制椭圆形：

在svg 标签中添加ellipse标签
添加cx和cy 属性，cx 表示椭圆x轴方向的中心坐标，cy表示y轴方向上的坐标
添加rx,ry属性，rx代表椭圆x轴上的半径，ry表示椭圆y轴上的半径
同样绘制出来默认是填充了黑色背景的椭圆

绘制空心的椭圆：

html 复制代码

<svg width="500" height="500">
  <ellipse
    cx="200"
    cy="200"
    rx="200"
    ry="100"
    fill="transparent"
    stroke="#1d7dfa"
    stroke-width="2"
  ></ellipse>
<svg>

效果：

和矩形，圆形一样加上fill="transparent", stroke,stroke-width 属性即可

四、绘制直线

html 复制代码

<svg width="500" height="500">
  <line
    x1="100"
    y1="100"
    x2="300"
    y2="100"
    stroke="#1d7dfa"
    stroke-width="5"
  ></line>
</svg>

效果如下：

可以看到：

svg 绘制直线使用line 标签
直线由两个点确定，x1 y1 和x2 y2
由于直线不是闭合图形，所以必须要添加stroke属性，否则没有效果

五、绘制折线

html 复制代码

<svg width="500" height="500">
  <polyline points="50 50, 100 50, 100 100, 150 100, 150 100"></polyline>
</svg>

看到这个效果好像不太符合我们的预期，这是因为polyline默认也会采用填充颜色的形式，所以要想达到理想的效果，需要添加stroke属性和fill="transparent",修改如下

html 复制代码

<svg width="500" height="500">
  <polyline
    points="50 50, 100 50, 100 100, 150 100, 150 100"
    stroke="#1d7dfa"
    fill="transparent"
  ></polyline>
</svg>

效果如下：

可以看到现在就符合我们的预期来了，所以svg 画直线时：

在svg 标签内使用 polyline 变标签
points 表示各个折现点的位置
polyline 默认会使用背景颜色填充的形式，所以需要添加添加stroke属性和fill="transparent" 才能达到理想的效果

六、绘制多边形

html 复制代码

<svg width="500" height="500">
  <polygon
    points="100 100, 200 100, 250 200, 200 300, 100 300, 50 200, 100 100"
  ></polygon>
</svg>

效果：

可以看到svg 绘制多边形也非常简单：

在svg 标签里面添加polygon标签
points 属性定义多边形各个点的位置，这些点会自动连接起来，就新形成了多边形
注意到最后一个点和起始点一样，这个点其实不写也能达到同样的效果
绘制出来的同样是填充黑色背景颜色的图形

绘制空心的多边形：

html 复制代码

<svg width="500" height="500">
  <polygon
    points="100 100, 200 100, 250 200, 200 300, 100 300, 50 200, 100 100"
    stroke="#1d7dfa"
    fill="transparent"
  ></polygon>
</svg>

可以看到同样的绘制空心的多边形，也需要添加fill="transparent" 和stroke属性

七、自定义路径

上面的介绍的，基本上都是有一定规则的图形，如果以上的绘制出的图形都不符合要求该怎么办呢？这个时候就可以使用svg中的path来绘制自定义路径，下面是使用自定义路径来绘制一条水平直线的例子

arduino 复制代码

<svg width="500" height="500">
  <path d="M 100 100, L 200 100" stroke="#1d7dfa" stroke-width="5"></path>
</svg>

效果如下：

可以看到svg的自定义路径非常简单：

自定义路径使用path标签
d 属性用来描述各个点
d属性中的M是Move To的缩写，作用是将画笔移动到指定的点，不绘制任何线条
d属性中的L是Line To的缩写，作用是从当前点画一条直线到指定的坐标点

自定义路径绘制水平直线还可以进行缩写，如下是缩写的方式：

html 复制代码

<svg width="500" height="500">
  <path d="M 100 100, H 200" stroke="#1d7dfa" stroke-width="5"></path>
</svg>

效果如下：

可以看到我们将之前的d属性中的L命令改成了H命令，这里的H是Horizontal 的缩写，表示水平的意思，这里也就是画一条水平直线的意思

绘制一条垂直的直线

html 复制代码

<svg width="500" height="500">
  <path d="M 100 100, L 100 200" stroke="#1d7dfa" stroke-width="5"></path>
</svg>

效果如下：

绘制垂直直线的简写形式：

html 复制代码

<svg width="500" height="500">
  <path d="M 100 100, V 200" stroke="#1d7dfa" stroke-width="5"></path>
</svg>

可以看到svg的自定义路径绘制垂直直线的缩写形式使用V命令。

H命令和h命令，V命令和v命令的区别

html 复制代码

<svg width="500" height="500">
  <path d="M 100 100, H 200" stroke="#1d7dfa" stroke-width="5"></path>
  <path d="M 100 120, h 200" stroke="#f00" stroke-width="5"></path>
  <path d="M 100 100, V 200" stroke="#1d7dfa" stroke-width="5"></path>
  <path d="M 120 100, v 200" stroke="#f00" stroke-width="5"></path>
</svg>

效果如下：

以上可以看到：

使用h命令画出的水平直线比使用H命令画出的水平直线要长些
使用v命令画出的垂直直线比使用V命令画出的垂直直线要长些

为什么会出现上面两个现象呢？

因为它们的坐标相对的位置不一样。

H是相对于svg的标签的最左边位置的，比如这里第一条水平直线的的H 200, 指的是相对于坐标svg标签最左边的位置，而h命令指的是相对于前一个点的位置，比如这里的第二条水平直线的h 200是相对于M 100 100的位置
V是相对于svg的标签的最上边边位置的，比如这里第一条垂直直线的的V 200, 指的是相对于坐标svg标签最上边的位置，而v命令指的是相对于前一个点的位置，比如这里的第二条垂直直线的v 200是相对于M 120 100的位置

如图：

使用自定义路径绘制闭合图形：

htmll 复制代码

<svg width="500" height="500">
  <path
    d="M 100 100, H 200, V 200 Z"
    stroke="#1d7dfa"
    stroke-width="5"
    fill="transparent"
  ></path>
</svg>

效果如下:

可以看到使用自定义路径绘制闭合图形，只需要在d属性的最后加上Z命令即可

八、svg 一些样式属性设置

设置画笔透明度

html 复制代码

<svg width="500" height="500">
      <circle
        cx="250"
        cy="250"
        r="100"
        fill="none"
        stroke="#f00"
        stroke-width="10"
        stroke-opacity="0.2"
      ></circle>
    </svg>

可以看到设置画笔透明度，添加stroke-opacity 属性即可

背景填充色添加透明度

html 复制代码

<svg width="500" height="500">
  <circle
    cx="250"
    cy="250"
    r="100"
    fill="#f00"
    stroke-width="10"
    fill-opacity="0.2"
  ></circle>
</svg>

效果如下：

可以看到背景填充色添加透明度只需要添加fill-opacity属性即可

给直线两端点添加帽子：

html 复制代码

<svg width="500" height="500">
      <line
        x1="200"
        y1="100"
        x2="300"
        y2="100"
        stroke="blue"
        stroke-width="10"
      ></line>
      <line
        x1="200"
        y1="130"
        x2="300"
        y2="130"
        stroke="blue"
        stroke-width="10"
        stroke-linecap="butt"
      ></line>
      <line
        x1="200"
        y1="160"
        x2="300"
        y2="160"
        stroke="blue"
        stroke-width="10"
        stroke-linecap="round"
      ></line>
      <line
        x1="200"
        y1="190"
        x2="300"
        y2="190"
        stroke="blue"
        stroke-width="10"
        stroke-linecap="square"
      ></line>
    </svg>

效果如下：

由以上可以得出：

给直线两端点添加帽子，只需要在line标签上添加 stroke-linecap 属性即可
stroke-linecap 有3个值，分别是butt， round，square
第一条直线和第二条直线一样，由此可以知道，stroke-linecap 的默认值是butt

给折线的连接点添加样式：

html 复制代码

<svg width="500" height="500">
  <polyline
    points="150 150, 250 100, 300 150"
    fill="none"
    stroke="#333"
    stroke-width="10"
  ></polyline>

  <polyline
    points="150 200, 250 150, 300 200"
    fill="none"
    stroke="#333"
    stroke-width="10"
    stroke-linejoin="miter"
  ></polyline>

  <polyline
    points="150 250, 250 200, 300 250"
    fill="none"
    stroke="#333"
    stroke-width="10"
    stroke-linejoin="bevel"
  ></polyline>

  <polyline
    points="150 300, 250 250, 300 300"
    fill="none"
    stroke="#333"
    stroke-width="10"
    stroke-linejoin="round"
  ></polyline>
</svg>

效果如下：

由以上可以看出：

折线的连接样式由stroke-linejoin 属性值决定，一共有3个值，分别是miter，bevel，round
第一条折线和第二条折线的样式一样可以得出stroke-linejoin 的默认值是miter

九、总结

本篇主要分享了svg 的一些基础知识。包括矩形的的绘制，圆形的绘制，直线的绘制，折线的绘制，多边形的绘制，自定义路径的用法，以及svg的一些样式属性设置。