绘制svg

要不来画画吧，诶不存在。

SVG

svg是什么呢，是…（百度一下）

SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

哈哈简短的说矢量图，矢量图粗俗点说，就是这张图无论你放多大他还是很清晰的，矢量嘛。

那么想画矢量图关键就是学着描绘这些矢量了，其中path元素就最基础同时也最多变，path是什么呢，是…（梅开二百度）

path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列。

​

开画

新建一个文档，就叫rect.svg。

编写格式是xml格式，所以基本明白一些主要的元素功能就能搞定了。

<svg width="230" height="230">
</svg>

再定义一个组 ，组是什么呢，是…（再度）

SVG <g>元素用于将SVG形状分组在一起。分组后，您可以像变形单个形状一样变换整个形状。与 不能单独成为转换目标的嵌套 <svg>元素相比，这是一个优势。您还可以设置分组元素的样式，并像对待单个元素一样重复使用它们。

大概像那个<div>？比如在组里定义透明度为1那么组内所有元素透明度都是1.

<svg width="230" height="230">
<g style="opacity:1">
</g>
</svg>

然后开始定义路径了，首先想干嘛呢，想做一个正方形按钮，按钮是圆角的，按钮内有一个正方形框的图案。

先有一个草图，大概先规划一些比例。

图片长宽230，四周留空20，按钮长宽就是190了，正方形框图案在按钮正中央，长宽都是90，框长10。

这些数据很重要，因为后面的path像是在坐标轴上定点连线，这时需要了解一些命令：

M 移动到的点的x轴和y轴的坐标
H 绘制平行线
V 绘制垂直线
Z 关闭路径，回到起点。
大写表示绝对定位，小写表示相对定位。

绝对定位，指的是以最左上角为原点的坐标轴定位，相对就是以当前的点作为原点。

坐标轴，x轴向右，y轴向下。

外层的这个按钮，可以利用rect元素简单描绘一下：

<svg width="230" height="230">
<g style="opacity:1">
    <rect x="20" y="20" rx="22" ry="22" width="190" height="190" fill="#e8e8e8"/>
</g>
</svg>

然后就变成了这样

接着想一想图案，它90的长宽，那么它的起点应该就在（70，70）这个位置。

所以先移动：M70 70

已经到这个点了，那么可以使用相对位置了，接着向下画90的直线，再向右画90：

M70 70 v90 h90

这时脑海里想着上面是什么，没错那是一个L。然后就向上走啦，当然可以v-90这样写，也可以V70，一个相对一个绝对，但其实都是同一个点。

最后z，就自动回到起点（70，70），形成一个正方形：

M70 70 v90 h90 v-90 z

这时方框的外线，还有一个内线，让框长10，也就是还要画一个长宽70的正方形。因为这个框要填颜色的，所以另起一个路径是不行的，所以在刚那个路径继续画，现在的点在哪？在（70，70），也就是外正方形的左上角，这时想去内正方形的左上角，只需要m10 10即可，然后操作都一样啦：

M70 70 v90 h90 v-90 z m10 10 h70 v70 h-70 z

填冲颜色加起来就是：

<svg width="230" height="230">
    <g style="opacity:1">
	  <rect x="20" y="20" rx="22" ry="22" width="190" height="190" fill="#e8e8e8"/>
      <path d="M70 70 v90 h90 v-90 z m10 10h70v70h-70z" fill="#202020"/>
    </g>
</svg>

看起来就是：

​

OHHHHHHHHHHHHHHHHHHHHHHHHHHH

关键要理解各个命令，各个元素就其实很简单啦。