怎么使用HTML5进行SVG矢量图形绘制

本文将为大家详细介绍“怎么使用HTML5进行SVG矢量图形绘制”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“怎么使用HTML5进行SVG矢量图形绘制”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

成都创新互联于2013年成立，公司以成都网站设计、成都网站制作、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户近千家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。

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

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

HTML5 SVG Rectangle

    

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

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

HTML5 SVG Line

    

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

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

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

HTML5 SVG Ellipse

    

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

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

HTML5 SVG Polygon

    

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

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

HTML5 SVG Polyline

 

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

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

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

HTML5 SVG Gradient Ellipse

   
      
      
      
      
   
   

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

如果你能读到这里，小编希望你对“怎么使用HTML5进行SVG矢量图形绘制”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注创新互联行业资讯频道！