在这一系列的SVG文章中，你已经发现了什么是SVG，为什么你应该考虑它们，以及如何将它们嵌入你的网页中。你也看到了基本的绘图元素，但大多数图像都超越了简单的线条、矩形和椭圆。
SVGpath 元素则要高级得多。可以说，它是你唯一需要的元素，因为它可以画出你想要的任何形状。然而，它有一个缺点，最好用一个例子来说明。
<path d="M500,500 L500,20 A480,480 0 0,1 968,607 z" />
它看起来很复杂，而且可能很难理解。
路径元素需要一个单一的d 属性，其字符串值包含一个编码的绘图指令列表。它不像正则表达式那样复杂，但很容易在数字丛林中迷失方向。
绘图字符串是使用一系列由大写或小写字母标识的指令形成的。该字母后面是适用于该特定命令的零个或多个参数。例如，下面的路径使用了一个M 命令，将SVG笔移动到500,500的起点，而不画线。
<path d="M500,500" />
SVGviewBox 属性会影响笔在图像本身的位置。使用上面的500,500 的例子，笔会被。
- 当SVG使用时，水平方向和垂直方向都居中
viewBox="0 0 1000 1000" - 时位于左上角
viewBox="500 500 1000 1000" - 位于右下角时
viewBox="-500 -500 1000 1000" - 当
viewBox="0 0 400 400"，在可见区域之外。
类似地，小写的m ，会使笔相对于它的当前位置移动--例如，50 向左单位，100 向上单位。
<path d="m50,-100" />
画线也是类似的：L 是按照绝对坐标画线，而l （小写L ）是相对于当前位置画线。因此，下面的路径是相同的。
<path d="M500,500 L100,600" />
<path d="M500,500 l-400,100" />
H 和 ，相应地将水平线画到绝对位置或相对位置 。比如说。h x
<path d="M500,500 H800" />
<path d="M500,500 h300" />
如果你能猜到V 和v 是做什么的，就可以得到奖励分 ...
<path d="M500,500 V400" />
<path d="M500,500 v-100" />
最后，Z 或z 通过从当前点到起点画一条线来关闭路径。通常情况下，Z 将是你的字符串中的最后一条命令，尽管有可能创建具有多个子路径的字符串。比如说。
<path d="M500,500 L500,200 L800,500 z M400,600 L400,900 L100,600 z" />
继续阅读如何在SVG中创建复杂的路径在SitePoint上。
