SVG 实例

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言，它可以在网页上实现丰富的图形效果。本章节将介绍一些常见的SVG实例，帮助您快速了解SVG的基本用法。

1. 绘制一个简单的矩形

SVG中最简单的图形之一就是矩形。下面是一个绘制矩形的示例代码：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

在这段代码中，我们使用<rect>元素来绘制一个矩形，x和y属性表示矩形的左上角坐标，width和height属性表示矩形的宽和高，fill属性表示矩形的填充颜色。

2. 绘制一个圆形

除了矩形，SVG还支持绘制圆形。下面是一个绘制圆形的示例代码：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

在这段代码中，我们使用<circle>元素来绘制一个圆形，cx和cy属性表示圆心的坐标，r属性表示圆的半径，fill属性表示圆的填充颜色。

3. 绘制一条直线

除了基本的形状，SVG还支持绘制线条。下面是一个绘制直线的示例代码：

<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" />
</svg>

在这段代码中，我们使用<line>元素来绘制一条直线，x1和y1属性表示起点坐标，x2和y2属性表示终点坐标，stroke属性表示线条的颜色。

以上就是几个简单的SVG实例，希望能帮助您快速入门SVG的基本用法。在接下来的章节中，我们将深入探讨SVG的更多功能和应用场景。