编程 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复制内容到剪贴板

<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

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

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>

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

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100"
style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>

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

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

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>

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

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>

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

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polyline</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>
</body>
</html>

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

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

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50"
style="fill:url(#gradient)" />
</svg>
</body>
</html>

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

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

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

HTML / CSS 相关文章推荐

CSS3的first-child选择器实战攻略

Apr 28 HTML / CSS

纯CSS3大转盘抽奖示例代码（响应式、可配置）

Jan 13 HTML / CSS

CSS3 实现雷达扫描图的示例代码

Sep 21 HTML / CSS

CSS3实现莲花绽放的动画效果

Nov 06 HTML / CSS

Html5 localStorage入门教程

Apr 26 HTML / CSS

HTML5 拖拽批量上传文件的示例代码

Mar 28 HTML / CSS

HTML5里的placeholder属性使用实例和美化显示效果的方法

Apr 23 HTML / CSS

HTML5 Convas APIs方法详解

Apr 24 HTML / CSS

HTML5实现多张图片上传功能

Mar 11 HTML / CSS

webView加载html图片遇到的问题解决

Oct 08 HTML / CSS

html+css实现文字折叠特效实例

Jun 02 HTML / CSS

CSS中理解层叠性及权重如何分配

Dec 24 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

阿联酋购物网站(26) 荷兰购物网站(99) 欧洲购物网站(15) 芬兰购物网站(10) 南非购物网站(8) 泰国购物网站(30) 葡萄牙购物网站(13) 奥地利购物网站(28) 哥伦比亚购物网站(5) 土耳其购物网站(10)

You might like

一台收音机，让一家人都笑逐颜开！

2020/08/21 无线电

PHP STRING 陷阱原理说明

2010/07/24 PHP

php封装db类连接sqlite3数据库的方法实例

2017/12/19 PHP

js关闭模态窗口刷新父页面或跳转页面

2012/12/13 Javascript

PHP abstract与interface之间的区别

2013/11/11 Javascript

浅谈javascript中this在事件中的应用

2015/02/15 Javascript

javascript实现回到顶部特效

2015/05/06 Javascript

jquery动态导航插件dynamicNav用法实例分析

2015/09/06 Javascript

Perl Substr()函数及函数的应用

2015/12/16 Javascript

jQuery树形插件jquery.simpleTree.js用法分析

2016/09/05 Javascript

深入理解JS实现快速排序和去重

2016/10/17 Javascript

jquery二级目录选中当前页的css样式

2016/12/08 Javascript

浅谈angularJS的$watch失效问题的解决方案

2017/08/11 Javascript

jquery自定义显示消息数量

2017/12/19 jQuery

js实现随机点名程序

2020/09/17 Javascript

利用原生JS实现欢乐水果机小游戏

2020/04/23 Javascript

Antd下拉选择,自动匹配功能的实现

2020/10/24 Javascript

[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾

2016/02/28 DOTA

github配置使用指南

2014/11/18 Python

利用numpy和pandas处理csv文件中的时间方法

2018/04/19 Python

Python用csv写入文件_消除空余行的方法

2018/07/06 Python

Python调用adb命令实现对多台设备同时进行reboot的方法

2018/10/15 Python

如何运行.ipynb文件的图文讲解

2019/06/27 Python

利用python实现PSO算法优化二元函数

2019/11/13 Python

python中resample函数实现重采样和降采样代码

2020/02/25 Python

伦敦剧院门票：London Theatre Direct

2018/11/21 全球购物

莫斯科制造商的廉价皮大衣：Fursk

2020/06/09 全球购物

Java面试中常遇到的问题，也是需要注意的几点

2013/08/30 面试题

机械设计制造专业个人求职信

2013/09/25 职场文书

化学学院毕业生自荐信范文

2013/12/17 职场文书

优秀求职信范文分享

2013/12/19 职场文书

学校交通安全责任书

2014/08/25 职场文书

蛋糕店创业计划书范文

2014/09/21 职场文书

2015年新农村建设指导员工作总结

2015/07/24 职场文书

学习型家庭事迹材料（2016精选版）

2016/02/29 职场文书

用Python的绘图库(matplotlib)绘制小波能量谱

2021/04/17 Python