成都创新互联网站制作重庆分公司

如何使用HTML5进行SVG矢量图形绘制-创新互联

这篇文章主要介绍了如何使用HTML5进行SVG矢量图形绘制,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

10年积累的成都网站设计、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有官渡免费网站建设让你可以放心的选择与我们合作。

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 版本,用 标签绘制一个圆:

  
  
SVG  
  
  
  

HTML5 SVG Circle

                  

在启用 HTML5 的新版 FireFox 中会生成如下结果:
如何使用HTML5进行SVG矢量图形绘制


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

  
  
SVG  
  
  
  

HTML5 SVG Rectangle

                  

在启用 HTML5 的新版 FireFox 中会生成如下结果:
如何使用HTML5进行SVG矢量图形绘制


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

  
  
SVG  
  
  
  

HTML5 SVG Line

                  

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

在启用 HTML5 的新版 FireFox 中会生成如下结果:
如何使用HTML5进行SVG矢量图形绘制


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

  
  
SVG  
  
  
  

HTML5 SVG Ellipse

                  

在启用 HTML5 的新版 FireFox 中会生成如下结果:
如何使用HTML5进行SVG矢量图形绘制


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

  
  
SVG  
  
  
  

HTML5 SVG Polygon

                  

在启用 HTML5 的新版 FireFox 中会生成如下结果:
如何使用HTML5进行SVG矢量图形绘制


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

  
  
SVG  
  
  
  

HTML5 SVG Polyline

               

在启用 HTML5 的新版 FireFox 中会生成如下结果:
如何使用HTML5进行SVG矢量图形绘制


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

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

  
  
SVG  
  
  
  

HTML5 SVG Gradient Ellipse

                                                                 

在启用 HTML5 的新版 FireFox 中会生成如下结果:
如何使用HTML5进行SVG矢量图形绘制

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用HTML5进行SVG矢量图形绘制”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网页标题:如何使用HTML5进行SVG矢量图形绘制-创新互联
本文链接:http://cxhlcq.com/article/dgdcpd.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部