首页
所有分类
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画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 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
REST(1) cmd(1) EditText(1) Switch(1) 远程桌面(2) Spring JPA(1) Django(9) openEuler(1) Spring Bean(1) TextInputLayout(1)
You might like
雄兵连三大错觉：凯莎没了，凉冰阵亡了，华烨觉得自己又行了
2020/04/09 国漫
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php实现异步数据调用的方法
2015/12/24 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
JavaScript中的 new 命令
2019/05/22 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
python中元类用法实例
2014/10/10 Python
python生成随机mac地址的方法
2015/03/16 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
详解Python的循环结构知识点
2019/05/20 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python tornado使用流生成图片的例子
2019/11/18 Python
Python实现ATM系统
2020/02/17 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
澳大利亚宠物商店：Petbarn
2017/11/18 全球购物
行政专员岗位职责
2014/01/02 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
预备党员自我评价范文
2015/03/04 职场文书
导游词之杭州西湖
2019/09/19 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
python实现语音常用度量方法的代码详解
2021/05/25 Python
总结Python变量的相关知识
2021/06/28 Python
vue动态绑定style样式
2022/04/20 Vue.js