手写 SVG - 简单图形不用愁

ihap技术黑洞
4,396 阅读5分钟

SVG 已经在 Web 上流行起来了，作为矢量图，它可以在放大十万倍之后依然保持清晰无锯齿，因为它保存的是图形的描述信息，而不是像其他图片那样保存每个像素点的信息。

在网页开发时，如果需要一个简单的图形，而又一时找不到资源的时候，如果可以直接上手写一个出来，那可要比开一个 SVG 创作工具快得多！

大约在两年前的一次项目开发中，需要在网页中显示一个三角形的小图标，看到项目中有人还在使用 CSS 的 border 拼凑的形式来实现，得到的一段难以理解的 CSS 代码：

.triangle::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  margin-right: 6px;
  margin-bottom: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #000;
  border-right: 10px solid transparent;
}

虽然可以实现效果，但这一点都不直观！并且面对复杂的图形，纯 CSS 也就束手无策了，或是需要大量的代码配合 DOM 结构来实现。

而要实现类似的一个三角形小图标，使用 SVG 则要直观得多：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <polygon points="0,0 10,5 0,10" />
</svg>

这实现了一个简单的以左边为底的等腰三角形。我来解释一下：

首先，<svg> 标签表示这是一个 SVG 图形；xmlns 属性表示使用的 XML 命名空间，对于 SVG 来说这是固定的；viewBox 属性代表着这个图形的“画布”大小，这个画布大小不是图形显示出来的实际大小，它只是为下面绘图的部分提供一个坐标参考，四个值分别为 x、y、width、height，分别表示横纵坐标和宽高，通过这四个值可以得到一个矩形区域，下面绘图的部分坐标如果落在这个区域内则可以被绘制出来，而如果落在这个区域外则被隐藏。

<svg> 标签里面是一个 <polygon> 标签，表示绘制一个多边形，其中 points 属性用于描述要绘制的多边形，这里一定要包含偶数个数字，可选使用英文逗号 , 或空格 进行分隔，其中每两个数字将作为一个坐标点，最终会将这些坐标点依次连接起来（最后一个坐标点会自动连接到第一个坐标点），就形成了一个任意的多边形图形。

<polygon> 会自动填充颜色（默认是黑色），如果想要改变填充的颜色，可以增加 fill 属性，比如绿色 fill="#0f0"，或者提供 fill="none" 则不填充颜色。如果不填充颜色，通常还需要增加一个 stroke 属性指定描边颜色，否则整个图形都是透明的。

我们可以任意更改其中的坐标，以实现不同形式的三角形，也可以增加坐标点，以实现更复杂的图形。

<polygon> 会自动封闭图形，如果我们只是想要一条折线，则可以使用 <polyline>，默认情况下它也是会填充颜色，并且没有描边，因此看起来和 <polygon> 一样，但是指定了 fill="none" stroke="#000" 之后，就可以看出区别了，<polyline> 只是一条线，最后一个坐标点不会自动与第一个坐标点相连。

有了多边形还不太够，有时我们需要一个“圆角矩形”，该怎么办呢？圆角矩形的四个角都是光滑的，我们不能通过添加 N 个点的方式使其尽可能圆润，但是可以使用另一个标签：<rect>，用它可以快速创建一个矩形。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <rect x="0" y="0" width="3" height="5" />
</svg>

这将在 SVG 画布的左上角画一个宽度为 3，高度为 5 的矩形。实际上这完全等价于 <polygon points="0,0 3,0 3,5 0,5" />。其中 x 和 y 属性表示矩形的左上角，默认是 0，因此在这里可以省略。

为了实现圆角矩形，我们可以给 <rect> 增加 rx 或者 ry 属性，表示圆角的半径。rx 和 ry 二者可以只给一个，另一个的默认值将会与已给的这个相同。如果给定不同的 rx 和 ry 值，则将得到一个椭圆的圆角，rx 和 ry 根据大小分别为椭圆的半长轴长度和半短轴长度。

所以，我们就可以绘制一个圆角矩形了：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <rect width="7" height="5" rx="1" />
</svg>

有了圆角矩形还不够，如果我们需要直接画一个圆形或者椭圆形怎么办？当然，我们可以直接使用 <rect> 对矩形的四个角进行圆角裁剪以得到圆形、椭圆形，只要 rx 等于 width 的一半且 ry 等于 height 的一半即可。但是这样并不直观。

实际上，SVG 提供了 <circle> 和 <ellipse> 标签，分别用于绘制圆形和椭圆。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <circle cx="25" cy="20" r="10"/>
  <ellipse cx="25" cy="40" rx="10" ry="5" />
</svg>

其中 cx 和 cy 表示圆心所在位置，r 表示圆形的半径，rx 和 ry 根据大小分别表示椭圆的半长轴长度和半短轴长度。

上面这些图形都可以使用 fill 属性来定义填充颜色，使用 stroke 属性来定义描边颜色。

至此，已经可以使用 SVG 绘制一些简单图形了，但是，也许你会发现，仅凭这些简单图形，在很多情况下要拼接一个完整的图形还是比较繁琐的，他们都是一个一个独立的图案，要填充上色也是非常繁琐的。

在网络上的很多 SVG 图形大多都使用 <path> 标签来进行绘制，其中有一个神奇的 d 属性，里面会包含一大段神秘代码，这些神秘代码表示什么意思呢？我将会在下一期进行介绍~

avatar
文章
阅读
粉丝