SVG 元素介绍

SVG (Scalable Vector Graphics)，即可缩放矢量图形，是一种基于 XML 的 2D 矢量图形格式，用于描述二维图形和图像。在 SVG 中，每个形状、路径和文本均为单独的 SVG 元素，可对每个元素进行样式设置、事件绑定等操作。

SVG 元素以标签的形式出现，在 HTML 或 XML 文档中使用 <svg> 标签来定义一个 SVG 元素。以下是常用的 SVG 元素及其属性介绍。

<svg> 元素

<svg> 标签是定义 SVG 元素的容器，它的属性如下：

• width：设置 SVG 元素的宽度。
• height：设置 SVG 元素的高度。
• viewBox：定义 SVG 元素的坐标系和尺寸，格式为 x y width height，例如 viewBox="0 0 100 100"。

示例代码：

<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- SVG 元素 -->
</svg>

<rect> 元素

<rect> 标签定义一个矩形，它的属性如下：

• x：设置矩形的左上角 x 坐标。
• y：设置矩形的左上角 y 坐标。
• width：设置矩形的宽度。
• height：设置矩形的高度。

示例代码：

<rect x="10" y="10" width="80" height="80" />

<circle> 元素

<circle> 标签定义一个圆形，它的属性如下：

• cx：设置圆心的 x 坐标。
• cy：设置圆心的 y 坐标。
• r：设置圆的半径。

示例代码：

<circle cx="50" cy="50" r="40" />

<line> 元素

<line> 标签定义一条直线，它的属性如下：

• x1：设置起点的 x 坐标。
• y1：设置起点的 y 坐标。
• x2：设置终点的 x 坐标。
• y2：设置终点的 y 坐标。

示例代码：

<line x1="10" y1="10" x2="90" y2="90" />

<path> 元素

<path> 标签定义一个路径，它的属性如下：

• d：定义路径的命令和参数，例如 M 10 10 L 90 10 L 50 90 Z 表示移动到 (10, 10)，画一条直线到 (90, 10)，再画一条直线到 (50, 90)，最后闭合路径。

示例代码：

<path d="M 10 10 L 90 10 L 50 90 Z" />

以上仅是常用的 SVG 元素和属性，SVG 还有很多高级的特性和功能，如渐变、滤镜、动画等，可参考 SVG 的官方文档了解更多信息。