首页
所有分类
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 渐变（Gradients）之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码
Dec 13 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 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
Jmerte(1) vue-router-link(1) 项目打包(2) 自定义组件(1) click(1) vue-cli3.x(1) Yolov5(1) TimePickerView(1) KVM(1) 本地化存储(1)
You might like
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php中的ini配置原理详解
2014/10/14 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
javascript学习笔记（五）原型和原型链详解
2014/10/08 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
Vue 组件（component）教程之实现精美的日历方法示例
2018/01/08 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
从零学Python之入门（五）缩进和选择
2014/05/27 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python 文件操作删除某行的实例
2017/09/04 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
服装设计行业个人的自我评价
2013/12/20 职场文书
外贸英语专业求职信范文
2013/12/25 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
《学会待客》教学反思
2014/02/22 职场文书
教师对学生的评语
2014/04/28 职场文书
校车安全责任书
2014/08/25 职场文书
幸福中国演讲稿
2014/09/12 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
项目合作意向书
2015/05/08 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python