前端知识精要：SVG入门精通（四）

在上一篇文章中，我们学习了如何使用大写字母命令来绘制图形。这一节，我们来学习一下相对路径，或者说是小写字母命令。相对路径不像大写字母命令那样明确指定目标，而是相对于当前位置进行绘制。

举个例子，假设我们现在要在原先的正方形基础上，再画一个圆。如果我们使用大写字母命令，我们可以写成这样：

<circle cx="100" cy="100" r="50" fill="red" />

这样，我们就会在正方形的中心位置画出一个红色的圆。但是，如果我们使用小写字母命令，我们可以写成这样：

<circle cx="+50" cy="+50" r="25" fill="blue" />

这里，我们使用cx和cy来指定圆心的位置，但是它们不是绝对坐标，而是相对于当前位置的偏移量。也就是说，圆心将出现在正方形的右上角，距离正方形的右上角各50个单位。

相对路径在绘制复杂的图形时非常有用，它可以让我们更方便地控制图形的位置和大小。

除了cx和cy之外，我们还可以使用其他一些属性来控制圆的绘制。比如，我们可以使用fill属性来指定圆的填充色，我们可以使用stroke属性来指定圆的边框颜色，我们可以使用stroke-width属性来指定圆的边框宽度，等等。

下面，我们来举几个例子，看看如何使用相对路径来绘制一些简单的图形。

1. 绘制一个矩形

<rect x="50" y="50" width="100" height="100" fill="green" />

2. 绘制一个圆

<circle cx="150" cy="150" r="50" fill="red" />

3. 绘制一个三角形

<polygon points="200,50 250,150 150,150" fill="blue" />

4. 绘制一个路径

<path d="M 50 50 L 100 100 L 150 50 Z" fill="orange" />

5. 绘制一个动画

<svg width="400" height="400">
  <circle cx="200" cy="200" r="50" fill="red">
    <animate attributeName="cx" from="200" to="300" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

好了，以上就是相对路径的基本用法。希望大家能够融会贯通，绘制出更加复杂的图形。

在下一篇文章中，我们将学习如何使用SVG滤镜来给图形添加各种特效。敬请期待！