首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

使用HTML5进行SVG矢量图形绘制的入门教程

Posted in HTML / CSS onFebruary 19, 2016

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>...</svg> 标签嵌入 SVG，下面是简单的语法：

XML/HTML Code复制内容到剪贴板
  1. <svg xmlns="http://www.w3.org/2000/svg">  
  2. ...       
  3. </svg>  

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Circle</h2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
使用HTML5进行SVG矢量图形绘制的入门教程

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Rectangle</h2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <rect id="redrect" width="300" height="100" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
使用HTML5进行SVG矢量图形绘制的入门教程

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Line</h2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <line x1="0" y1="0" x2="200" y2="100"  
  10.           style="stroke:red;stroke-width:2"/>  
  11. </svg>  
  12. </body>  
  13. </html>  

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

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
使用HTML5进行SVG矢量图形绘制的入门教程

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Ellipse</h2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
使用HTML5进行SVG矢量图形绘制的入门教程

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Polygon</h2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <polygon  points="20,10 300,20, 170,50" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
使用HTML5进行SVG矢量图形绘制的入门教程

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Polyline</h2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.  <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />  
  10. </svg>  
  11. </body>  
  12. </html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
使用HTML5进行SVG矢量图形绘制的入门教程

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

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset="utf-8" />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Gradient Ellipse</h2>  
  8. <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">  
  9.    <defs>  
  10.       <radialGradient id="gradient" cx="50%" cy="50%" r="50%"  
  11.       fx="50%" fy="50%">  
  12.       <stop offset="0%" style="stop-color:rgb(200,200,200);   
  13.       stop-opacity:0"/>  
  14.       <stop offset="100%" style="stop-color:rgb(0,0,255);   
  15.       stop-opacity:1"/>  
  16.       </radialGradient>  
  17.    </defs>  
  18.    <ellipse cx="100" cy="50" rx="100" ry="50"    
  19.       style="fill:url(#gradient)" />  
  20. </svg>  
  21. </body>  
  22. </html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果：
使用HTML5进行SVG矢量图形绘制的入门教程

使用HTML5进行SVG矢量图形绘制的入门教程

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 简写animation
May 10 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
关于前端上传文件全面基础扫盲贴（入门）
Aug 01 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 #HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 #HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 #HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 #HTML / CSS
HTML5实现预览本地图片
Feb 17 #HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 #HTML / CSS
HTML5未来发展趋势
Feb 01 #HTML / CSS
德生1994(1) 德劲1107(1) ICF-SW100(1) 华普R-96(1) 上海永华(1) YH-R296(1) PR-D3L(1) SRF-22W(1) A254(1) SRF-40W(1)
You might like
PHP 数据库树的遍历方法
2009/02/06 PHP
如何使用纯PHP实现定时器任务（Timer）
2015/07/31 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
js实现收缩菜单效果实例代码
2013/10/30 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python与C互相调用的方法详解
2017/07/14 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python处理“
2019/06/10 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Arti-shopping中文官网：大型海外商品一站式直邮平台
2020/03/23 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
财务部绩效考核方案
2014/05/04 职场文书
公安学专业求职信
2014/07/27 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
在职证明范本
2015/06/15 职场文书
反邪教学习心得体会
2016/01/15 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL