Understanding SVG Paths
Overview 如果你曾经看过一个 icon 的 SVG 代码，你可能会注意到他们通常是有一个 <path> 元素和一个神秘的 d 属性实现的。 你可能以为他们不过是设计师最喜欢的矢量图形编辑器的输出，虽然可能是正确的，但有些过度简化了。 理解这个属性的内部运作机制将是前端技能的一大助力，它让你能够做到以前从未想过的事情，比如制作弯曲的动画。 这份指南将会谈到 d 属性，也被称为 path data。 A Path is a Series of Commands 路径是一系列命令 d 属性实际上是一系列命令，告诉浏览器如何绘制 path，如果将属性内容规范一下，将会是下面这样： M 12.0 7.2 C 10.5 5.6 8.1 5.2 6.3 6.7 C 4.5 8.1 4.2 10.6 5.7 12.4 L 12.0 18.3 L 18.3 12.4 C 19.7 10.6 19.5 8.1 17.7 6.7 C 15.8 5.2 13.4 5.6 12.0 7.2 Z 为了绘制出 path，浏览器按照顺序执行这些命令，每个命令绘制一小部分。 所有的 path 命令都遵循同样的语法，单个字母 + 一系列数字，字母代表命令类型，二数字则是命令的参数。 ...