27、SVG 绘图技术全解析

SVG 绘图技术全解析

1. 引言

在网页开发中，图形绘制是一个重要的部分。SVG（Scalar Vector Graphics）作为一种用于定义图形的系统，独立于任何编程语言，以 XML 格式的指令来描述图形，具有诸多优势，如文件小且不失分辨率。本文将详细介绍 SVG 的使用，包括绘制 HTML5 标志和一个卡通形象，并给出具体的代码示例和操作步骤。

2. SVG 基础

SVG 由标记元素组成，每个元素有类型，可能有开闭标签或自闭合标签。开闭标签中可包含属性，属性名与元素类型相关，属性值用引号括起来。例如：

<svg id="wholesvg" height="600" width="800" xmlns="http://www.w3.org/2000/svg" > ... </svg>
<polygon points="139 51, 139 82, 213 82, 216 51" fill="#FFFFFF";/>
<text x="75" y="60" font-family="'Trebuchet MS', 'Arial Bold', Helvetica, sans-serif"; font-size="54"; font-weight: bold; >HTML</text>

其中， xmlns 属性指向 SVG 标准。SVG 标记必须“格式良好”，即省略闭合标签时，开放标签要有闭合斜杠，属性值需用引号，标记嵌套要正确。

3. 使用 SVG