1
SVG 和 Canvas 绘图：SVG 和 Canvas 绘图基础介绍
1 SVG 基础
1.1 SVG 简介与优势
SVG，全称为 Scalable Vector Graphics，是一种基于 XML 的矢量图形格式。
与位图图像（如 JPEG 或 PNG）不同，SVG 图像由点、线和形状组成，这些元素
在任何分辨率下都能保持清晰。SVG 的主要优势包括：
� 可缩放性：SVG 图像可以无损地缩放至任意大小。
� 分辨率独立：在高分辨率设备上，SVG 图像依然保持清晰。
� 基于文本：SVG 文件是文本格式，可以使用任何文本编辑器编辑，
易于修改和版本控制。
� 交互性：SVG 支持事件处理，可以创建动态和交互式的图形。
� 搜索引擎优化：由于 SVG 是基于文本的，搜索引擎可以索引 SVG
文件中的内容，提高网页的可发现性。
1.2 SVG 的基本元素
SVG 提供了多种基本图形元素，用于创建复杂的矢量图形。以下是一些常
用的基本元素：
� <rect>：用于绘制矩形。
� <circle>：用于绘制圆形。
� <ellipse>：用于绘制椭圆。
� <line>：用于绘制直线。
� <polyline>和<polygon>：用于绘制多边形。
� <path>：用于绘制任意形状的路径。
1.2.1 示例：绘制一个矩形和一个圆形
<svg width="200" height="200">
<rect x="10" y="10" width="100" height="100" fill="blue" />
<circle cx="150" cy="50" r="40" fill="red" />
</svg>
在这个例子中，我们使用<rect>元素绘制了一个蓝色的矩形，使用<circle>
元素绘制了一个红色的圆形。x 和 y 属性定义了矩形的左上角位置，width 和
height 定义了矩形的大小。圆形的位置由 cx 和 cy 属性定义，半径由 r 属性定义。
1.3 SVG 路径命令详解
SVG 的<path>元素允许你绘制复杂的形状，通过一系列的命令和坐标来定
义路径。以下是一些基本的路径命令：
剩余10页未读，继续阅读
资源评论
