编程 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 相关文章推荐

HTML+CSS3 模仿Windows7 桌面效果

Jun 17 HTML / CSS

一款纯css3实现的tab选项卡的实列教程

Dec 11 HTML / CSS

使用CSS3制作饼状旋转载入效果的实例

Jun 23 HTML / CSS

解决CSS3 transition-delay 属性默认值0不带单位失效的问题

Oct 29 HTML / CSS

基于HTML5 Canvas 实现商场监控实例详解

Nov 20 HTML / CSS

html5应用缓存_动力节点Java学院整理

Jul 13 HTML / CSS

使用javascript和HTML5 Canvas画的四渐变色播放按钮效果

Apr 10 HTML / CSS

HTML5单页面手势滑屏切换原理

Mar 21 HTML / CSS

浅谈h5自定义audio(问题及解决)

Aug 19 HTML / CSS

浅谈html5标签css3的常用样式

Oct 20 HTML / CSS

HTML5新增form控件和表单属性实例代码详解

May 15 HTML / CSS

canvas绘制太极图的实现示例

Apr 29 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

.NET Framework(2) 磁盘分区(1) FTP服务器(1) 夸克(1) DNS服务器(2) 粒子对撞机(1) 界面设计(1) 国际空间站(1) 对撞机(1) IIS7(1)

You might like

树型结构列出指定目录里所有文件的PHP类

2006/10/09 PHP

PHP版汉字转码的实现详解

2013/06/09 PHP

is_uploaded_file函数引发的不能上传文件问题

2013/10/29 PHP

PHP字符串的连接的简单实例

2013/12/30 PHP

php 邮件发送问题解决

2014/03/22 PHP

php实现猴子选大王问题算法实例

2015/04/20 PHP

JavaScript.Encode手动解码技巧

2010/07/14 Javascript

利用腾讯的ip地址库做ip物理地址定位

2010/07/24 Javascript

js的写法基础分析

2011/01/17 Javascript

多选列表框动态添加,移动,删除,全选等操作的简单实例

2014/01/13 Javascript

javascript中2个感叹号的用法实例详解

2014/09/04 Javascript

基于jquery实现放大镜效果

2015/08/17 Javascript

移动端横屏的JS代码(beta)

2016/05/16 Javascript

JS中对Cookie的操作详解

2016/08/05 Javascript

微信小程序后台https域名绑定和免费的https证书申请详解

2016/11/10 Javascript

详解angular 中的自定义指令之详解API

2017/06/20 Javascript

webpack打包js的方法

2018/03/12 Javascript

vue中动态添加class类名的方法

2018/09/05 Javascript

node Buffer缓存区常见操作示例

2019/05/04 Javascript

Python装饰器decorator用法实例

2014/11/10 Python

利用Python实现简单的相似图片搜索的教程

2015/04/23 Python

Django发送html邮件的方法

2015/05/26 Python

利用Python爬取可用的代理IP

2016/08/18 Python

Python中表达式x += y和x = x+y 的区别详解

2017/06/20 Python

python爬虫之模拟登陆csdn的实例代码

2018/05/18 Python

python web框架Flask实现图形验证码及验证码的动态刷新实例

2019/10/14 Python

Python和Sublime整合过程图示

2019/12/25 Python

python 深度学习中的4种激活函数

2020/09/18 Python

CSS3实现线性渐变用法示例代码详解

2020/08/07 HTML / CSS

美国高级工作服品牌：Carhartt

2018/01/25 全球购物

乌克兰巴士票购买网站：inBus

2021/03/12 全球购物

老师推荐信

2013/10/28 职场文书

高中生的自我评价

2014/03/04 职场文书

联欢晚会主持词

2014/03/25 职场文书

自我查摆剖析材料

2014/10/11 职场文书

一文带你理解vue创建一个后台管理系统流程（Vue+Element）

2021/05/18 Vue.js