HTML SVG 矢量图

介绍

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以在网页上直接使用。本教程将详细介绍如何使用HTML SVG来创建和操作矢量图形。

创建SVG元素

首先，我们需要创建一个SVG元素。这可以通过在HTML文档中添加<svg>标签来实现。下面是一个简单的例子：

<svg width="100" height="100">
  <!-- SVG内容将在此处 -->
</svg>

绘制基本形状

SVG支持多种基本形状，例如矩形（<rect>）、圆形（<circle>）和椭圆形（<ellipse>）等。下面是一个使用<rect>标签绘制矩形的例子：

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

在上面的代码中，x和y属性定义了矩形左上角的坐标，width和height属性定义了矩形的宽度和高度，而fill属性定义了矩形的填充颜色。

添加文本

使用SVG还可以在图形中添加文本。这可以通过使用<text>标签来实现。下面是一个简单的例子：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue"/>
  <text x="50" y="55" font-size="20" text-anchor="middle" fill="white">文本</text>
</svg>

在上面的代码中，x和y属性定义了文本的坐标，font-size属性定义了文本的大小，text-anchor属性将文本水平居中，而fill属性定义了文本的颜色。

结论

本教程简要介绍了如何使用HTML SVG来创建和操作矢量图形。SVG是一种非常强大的工具，可以用于创建动态、交互式的网页内容。希望这个教程能够帮助您入门SVG！