HTML | SVG 图案

HTML 和 SVG 都是用于创建图形的强大工具。HTML 主要用于创建网页中的静态图像，而 SVG 可以创建更复杂的动态图形。在本文中，我们将介绍 HTML 和 SVG 图案的基础知识和示例代码。

HTML 图案

HTML 图案是一种在 HTML 中创建图形的方法。下面是创建一个简单的矩形图案的示例：

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

该代码将创建一个 100 x 100 的 SVG 容器，并在其中创建一个蓝色矩形。此外，我们在矩形的 x、y、width 和 height 属性中指定了矩形的位置和大小。

下面是示例代码创建的矩形：

SVG 图案

SVG 是一种基于 XML 的图形语言，允许您创建更复杂的动态图像。下面是一个简单的 SVG 圆形图案的示例：

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

该代码将创建一个 100 x 100 的 SVG 容器，并在其中创建一个红色圆形。此外，我们在圆形的 cx、cy 和 r 属性中指定了圆形的位置和半径。

下面是示例代码创建的圆形：

结论

HTML 和 SVG 图案都是创建网页图像的重要技术。HTML 适用于创建简单的静态图像，而 SVG 可以创建复杂的动态图像。希望这篇简单的介绍可以让您更好地了解 HTML 和 SVG 图案的基础知识。