前端必知必会 | 学SVG看这篇就够了（三）

_island
2,119 阅读4分钟

这是SVG系列目录：

前言

在我们教程中，我们已经学习了SVG的一些基础知识，了解SVG在页面中的定位，viewBox属性的使用场景还有它的兄弟preserveAspectRatio属性，有了这些基础知识之后，我们现在来看看SVG中图形的基本绘画。

基本绘画

矩形

以下代码代表绘制一个矩形，rect标签中的x、y属性分别指定了矩形左上角端点的横坐标和纵坐标，width、height属性分别指定矩形的宽度和高度。

<rect x="100" y="50" fill="red"></rect>

7.png

圆形

以下代码代表绘制一个圆形，circle标签中的cx、cy、r属性分别为横坐标、纵坐标和半径。

<circle cx="100" cy="100" r="100" fill="red"></circle>

8.png

椭圆

以下代码代表绘制一个椭圆，ellipse标签中的cx、cy、rx，ry属性分别为圆形横坐标、圆心纵坐标、横向半径、纵向半径。

<ellipse cx="200" cy="120" rx="150" ry="100" fill='red'></ellipse>

9.png

直线

以下代码代表绘制一条直线，line标签中的x1，y1，x2，y2属性分别代表起点横坐标、起点纵坐标、终点横坐标、终点纵坐标。

<line x1="10" y1="100" x2="100" y2="20" stroke="red" stroke-width="3px"></line>

10.png

多边形

以下代码代表绘制一个多边形，points属性指定了折线中每个点的坐标，横坐标和纵坐标之间使用逗号隔开，点与点之间使用空格隔开。

<polygon fill="red" stroke="purple" points="5,5 160,5 160,100 5,100 5,5"></polygon>

11.png

折线

以下代码代表绘制一条折线，也上面多边形一样，points属性指定了折线中每个点的坐标，横坐标和纵坐标之间使用逗号隔开，点与点之间使用空格隔开。

<polyline points="10,10 30,10 30,30 50,30 50,50 70,50" fill="none" stroke="red" stroke-width="3px"></polyline>

12.png

扩展属性用法

属性名称备注
stroke设置描边
stroke-width设置描边的大小
stroke-opacity设置描边透明度
fill设置填充的颜色
fill-opacity设置填充颜色的透明度

path

路径，它是SVG中最强大的图形，它可以绘制出线条, 曲线, 弧形等其他图形，例如贝塞尔曲线、二次曲线等曲线。

我们先看一个简单例子。

<svg width="300" hight="300">
    <path d="M100 0 L25 200" stroke="black"></path>
</svg>

d属性包含路径所有路径点，最后起点和终点连接起来形成图形，同样可以使用上面说到的扩展属性。

M即是Move to命令，它接收两个参数。分别是将横坐标和纵坐标。将点移动到指定的位置。上面的例子是将起点移动至x100，y0的点。

L即是Line to命令，它接收两个参数。分别是将横坐标和纵坐标。L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。

另外L命令还有简写的方法，用来绘制水平线和垂直线。H，绘制水平线。V，绘制垂直线。这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。

我们再画一个三角形看看。

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="red" stroke="red"></path>

14.png

以上代码，使用了L命令的简写方式，首先我们将画笔定在了10，10处，将画笔绘制到x90这个点上，再绘制到y90这个点上，再绘制到x10这个点上，最后使用L命令的常规写法把这个矩形补全。此次记得补全，如果没有补全，图形会自动填充但填充形成的一边没有描边（见下图）。

15.png

上面的例子我们还可以继续优化下，我们使用Z命令闭合路径，Z命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z命令不用区分大小写。

<path d="M10 10 H 90 V 90 H 10 Z" fill="red" stroke="black"></path>
命令
命令说明
Mmove to
Lline to
Hhorizontal line to
Vvertical line to
Ccurve to
Ssmooth curve to
Qquadratic Bézier curve
Tsmooth quadratic Bézier curve to
Aelliptical Arc
Zclose path

**注意：**以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

最后

本篇文章讲述了SVG中基本图形绘制、路径初体验、SVG标签中的扩展属性用法，感谢你的阅读！

😀😀 关注我，不迷路！ 😀😀

avatar
文章
阅读
粉丝