关于使用HTML5进行SVG矢量图形绘制的代码-

VG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。

SVG 主要用于矢量类型的图表，比如饼图，X，Y 坐标系统中的二维图等等。

SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准，你可以在 SVG 规范 页面中查看最新版本的 SVG 规范。

查看 SVG 文件
大多数 Web 浏览器都可以显示 SVG，就像它们可以显示 PNG，GIF 以及 JPG 图形。IE 用户可能需要安装 Adobe SVG 阅读器 以便能够在浏览器中查看 SVG。

在 HTML5 中嵌入 SVG
HTML5 允许我们直接使用 __ 标签嵌入 SVG，下面是简单的语法：

HTML5 - SVG 圆

下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个圆：

HTML5 SVG Circle

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个矩形：

HTML5 SVG Rectangle

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个线条：

HTML5 SVG Line

你可以使用 style 属性给它设置额外的样式信息，比如笔画，填充色，笔画宽度等等。

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个椭圆：

HTML5 SVG Ellipse

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个多边形：

HTML5 SVG Polygon

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个折线图：

HTML5 SVG Polyline

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个椭圆，使用 标签定义一个 SVG 径向渐变。

我们可以以类似的方式用 标签创建 SVG 线性渐变。

HTML5 SVG Gradient Ellipse

在启用 HTML5 的最新版 FireFox 中会生成如下结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！