SVG 实例

SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形存储格式。它被广泛应用于网页设计和移动应用中，因其矢量特性而具有广泛的适用性和良好的可缩放性。本文将通过多个实例详细阐述SVG在现实应用中的具体表现。

SVG 基础概念

1. SVG 元素

SVG 文档由一系列 SVG 元素组成，包括形状、文本、路径等。以下是一些常见的 SVG 元素：

<circle>：定义一个圆形。
<rect>：定义一个矩形。
<line>：定义一条线段。
<polyline>：定义一个折线。
<polygon>：定义一个多边形。
<text>：定义文本内容。

2. SVG 属性

SVG 元素具有丰富的属性，可以控制元素的外观和功能。以下是一些常见的 SVG 属性：

fill：填充颜色。
stroke：轮廓颜色。
stroke-width：轮廓宽度。
transform：元素变换。

SVG 实例：绘制圆形

以下是一个简单的 SVG 实例，演示如何使用 <circle> 元素绘制一个圆形：

html 复制代码

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

这个实例创建了一个半径为 40 的圆形，圆心位于坐标 (50,50)，轮廓颜色为绿色，填充颜色为黄色。

SVG 实例：绘制矩形

同样地，以下是一个使用 <rect> 元素绘制矩形的 SVG 实例：

html 复制代码

<svg width="200" height="200">
  <rect width="100" height="100" stroke="blue" stroke-width="4" fill="red" />
</svg>

在这个例子中，我们创建了一个边长为 100 的矩形，轮廓颜色为蓝色，填充颜色为红色。

SVG 实例：绘制文本

文本也是 SVG 图形的一部分，以下是一个示例，展示了如何使用 <text> 元素在 SVG 中添加文本：

html 复制代码

<svg width="200" height="100">
  <text x="10" y="20" font-family="Verdana" font-size="20" fill="black">Hello, SVG!</text>
</svg>

这个示例在 SVG 图形中添加了一行文本，字体为 Verdana，字号为 20，文本内容为"Hello, SVG!"。

SVG 实例：组合图形

SVG 允许将多个图形组合在一起，以下是一个包含圆形、矩形和文本的 SVG 实例：

html 复制代码

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <rect x="100" y="50" width="50" height="50" stroke="blue" stroke-width="4" fill="red" />
  <text x="10" y="100" font-family="Verdana" font-size="20" fill="black">SVG</text>
</svg>

在这个例子中，我们组合了一个圆形、一个矩形和一行文本，以创建一个简单的 SVG 图形。

总结

通过本文的多个实例，我们了解到 SVG 的基本概念和应用场景。SVG 是一种功能强大的图形格式，能够为网页设计、移动应用等提供丰富的视觉元素。希望这些实例能够帮助您更好地理解和应用 SVG 技术。