位置: IT常识 - 正文

5 分钟速通 SVG

编辑：rootadmin

前言 SVG对不少前端来说就是一个熟悉的陌生人，此篇博客是我学习完SVG后做的一个小总结，帮助我快速回忆SVG相关内容。它不能帮你精通 SVG，但是可以帮你快速了解SVG的一些核心内容，不会迷失在一些细枝末节的设定中，让你对 SVG 有一个大概的认识。基础 SVG，全名 Scalable Vec ... 前言

推荐整理分享5 分钟速通 SVG，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

SVG对不少前端来说就是一个熟悉的陌生人，此篇博客是我学习完SVG后做的一个小总结，帮助我快速回忆SVG相关内容。

它不能帮你精通 SVG，但是可以帮你快速了解SVG的一些核心内容，不会迷失在一些细枝末节的设定中，让你对 SVG 有一个大概的认识。

基础

SVG，全名 Scalable Vector Graphics，是可缩放的矢量图形，可以随意放大缩小并且不失真，最重要的是体积也很小。

SVG 是一种XML语言，由 svg 根元素和一些基本形状元素构成，另外还有一个 g 元素将基本形状元素编组，支持渐变、旋转、动画、滤镜等效果，且能与 js 进行交互。

通常我们使用的 SVG 指的是 SVG1.1,而不是 SVG2.0，因为它的浏览器支持度不够。

我们先给出一个 MDN 上的简单示例：

效果是：

svg 根元素上的这些除了宽高算是固定格式，下面的三个元素分别是矩形，圆和文字，每个元素上都有坐标定位，上面有些属性用来改变它的位置、大小和填充颜色。

svg 的基本图形元素有：

* rect 矩形* circle 圆形* ellipse 椭圆* line 直线* polyline 折线* polygon 多边形* path 路径

知道有这么多元素就行了，具体属性看相关文档，不用细究。

前 6 种元素全部可以用 path 实现，但是为了语义化容易读懂，可以尽量用前 6 种。

现在着重讲一下 path。

路径 path

path 是 svg 基础形状中最强大的一个，可以很容易绘制直线，曲线，弧线。

先给个示例：

效果是：

示例中的 path 元素上，fill 和 stroke 对前端来说应该容易理解，就是填充和线条颜色，但它定义形状的核心属性d看起来就很容易让人眼前一懵。

d表示一系列的路径命令，而SVG的六种路径命令类型如下：

移动到：M、m画线至：L、l、H、h、V、v三次方贝塞尔曲线：C、c、S、s二次方贝塞尔曲线：Q、q、T、t椭圆曲线：A、a封闭路径：Z、z

操作就是使用移动命令移动到指定的点，然后使用剩下的几个路径来绘制线条。

然后我们解析一下上方的SVG例子：

使用移动命令 M 10 10 将画笔移动到横坐标 10，纵坐标 10 的位置使用画线命令 H 90 向右横向绘制一条直线，这条直线的纵坐标不变，横坐标终点是 90，此时画笔的位置到了横坐标 90，纵坐标 10 的位置再使用画线命令 V 90 向下纵向绘制一条直线，这条直线的横坐标不变，纵坐标重点为 90，此时画笔的位置到了横坐标 90，纵坐标 90 的位置最后使用画线命令 L 10 10 ，从当前坐标位置绘制一条到横坐标 10，纵坐标 10 的直线。

最后我们得到的结果就是一个位于横坐标 10、纵坐标 10 位置的宽为 80 的正方形。

最后得提一下封闭路径 Z 这个特殊命令，它没有参数，作用是从当前路径绘制一条直线到路径的第一个点。

渐变和文字

渐变元素

linearGradient 线性渐变radialGradient 径向渐变

用到自己看文档，了解有这么个东西就行了。

文字 text 元素同理。

g 分组

元素g是用来组合对象的容器。添加到g元素的属性会被其所有的子元素继承。

也就是说你可以使用该元素对一批形状进行批量的上色和变换操作。

上个例子：

先来一个使用示例：