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

html教程 跟版网
这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下

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 中会生成如下结果：
2016219112130340.jpg (223×186)


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 中会生成如下结果：
2016219112200272.jpg (316×152)


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 中会生成如下结果：
2016219112220725.jpg (217×159)


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 中会生成如下结果：
2016219112240763.jpg (225×148)


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 中会生成如下结果：
2016219112258796.jpg (310×118)


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 中会生成如下结果：
2016219112318049.jpg (245×114)


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 中会生成如下结果：
2016219112338977.jpg (319×157)

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main，header，footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理？你可能花几天也想不明白，但谁在意呢！这个脚本几乎是所有正式网站必用
HTML5之Canvas基础绘图教程
HTML5 火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线： !doctype html ht
HTML5 respond.js 解决IE6~8的响应式布局问题
响应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这
微软开源新一代浏览器的JavaScript引擎核心代码
近日，微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号，项目名称为 ChakraCore，遵循MIT许可协议。 ...，HTML5中国，中国最大的HTML5中文门户。
Google Chrome终于支持CSS Variables了
这篇文章报道的不是“新闻”，因为W3C早已开始着手CSS变量方面的工作。至于Google，则要追溯到11月初，当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...，HTML5中国，中国最大的HTML5中文门户。
如果你坚持写代码,25年后你将会遇到这些...
25年后，你发的编程知识经验还会增加，但薪水却不加了；25年后，如果你还热爱编程便不会选择转行去当管理人员；25年后，你想和好友去玩耍，而经理却让你加班；那么你是否想过这25年之间做出另一种选择呢？ ...，HTML5中国，中国最大的HTML5中文门户。
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室