SVG`path`语法：图解指南

SVG中的<path>元素是最终的绘制元素。 它可以画任何东西！ 我听说在引擎盖下所有其他绘图元素最终都会使用路径。 path元素采用单个属性来描述其绘制内容： d属性。 它具有的值本身就是一个迷你语法。 它看起来很难理解。 大量的数字和字母被拼成一条长字符串。 像其他任何计算机一样，押韵是有原因的。 我不是专家，但我认为深入研究会很有趣。

这是中等复杂性路径的一个例子，我会说：

<path d="M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9
  C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z"/>

我们可以重新格式化它以开始理解它（仍然是有效的代码）：

<path d="
  M 213.1,6.7
  c -32.4-14.4-73.7,0-88.1,30.6
  C 110.6,4.9,67.5-9.5,36.9,6.7
  C 2.8,22.9-13.4,62.4,13.5,110.9
  C 33.3,145.1,67.5,170.3,125,217
  c 59.3-46.7,93.5-71.9,111.5-106.1
  C 263.4,64.2,247.2,22.9,213.1,6.7
  z" />

字母是命令 。 数字将值传递给那些命令。 所有逗号都是可选的（它们可以是空格）。

例如，第一个命令是M M表示，从一个隐喻的意义上讲， 拿起笔并将其移到确切的位置213.1, 6.7 。 暂时不要绘制任何东西，只需移动钢笔的位置即可。 这样，如果其他命令可以绘制，则它现在将从该位置开始。

M只是许多路径命令之一。 根据我的数量，其中有18个。

许多（但不是全部）成对出现。 有一个大写和一个小写版本。 大写版本是绝对版本，小写版本是相对版本。 让我们继续以M为例：

• M 100,100表示“拿起笔并将其移动到精确的坐标100,100”
• m 100,100表示“将笔100向下移动，然后从当前位置向右移动100”。

许多命令具有相同的设置。 小写版本会影响当前“笔”的位置。

让我们看两个绝对命令：

后跟一个相对命令：