如何画svg图标（用SVG秒画奥运五环）

点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

SVG，即可缩放矢量图形，基于XML，是用于描述二维矢量图形的一种图形格式。由于SVG可缩放的矢量图形特性，意味着在对SVG图形做任意尺寸变化时，不会出现模糊和失真。

要利用SVG来画一个奥运五坏也是非常容易的。先来看一个完整的奥运五坏图：

第一部分，利用SVG来画两个圆环。这个可以利用SVG内置的Circle标签。Circle标签元素可以基于中心点和半径绘制一个圆环，整个例子需要引入五个Circle标签元素。代码如下：

G标签是SVG的容器元素，可以将相关的元素组合在一起进行 绘制，由于SVG根据元素的先后顺序绘制，上述代码只是简单排列了五环并以层叠的方式展示，并不能实现五环环环相扣的效果，如下图所示：

第二部分，要让五环环环相扣，一种简单粗暴的方式是进行"补刀"，利用Path标签或者Line标签绘制一个新的圆弧或者线段制造视觉差异，因此，选择将新增加的Line标签元素添加到实例中，代码如下：

这样一个完整的五环环环相扣的效果就绘制完了。当然，也可以利用Path标签绘制圆弧来实现奥运五环。

最后在总结一下：

对于前端工程师来说，使用一个SVG JS库来绘制SVG图及实现基于SVG的动画效果似乎更有成效。

,