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

这篇文章主要介绍了运用HTML5进行SVG矢量图形绘制的入门教程,包含根本图形的绘制和简略的渐变结果等介绍,注意旧版本IE对其的支撑并欠好,需要的伴侣可以参照 下 这篇文章主要介绍了运用HTML5进行SVG矢量图形绘制的入门教程,包含根本图形的绘制和简略的渐变结果等介绍,注意旧版本IE对其的支撑并欠好,需要的伴侣可以参照 下

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 中会生成如下效果：

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！