编程 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和html制作泡沫对话框实现代码

Mar 21 HTML / CSS

CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

Oct 10 HTML / CSS

纯CSS实现设置半个字符的样式

Jul 03 HTML / CSS

HTML5 Canvas实现文本对齐的方法总结

Mar 24 HTML / CSS

html5使用Canvas绘图的使用方法

Nov 21 HTML / CSS

html5-canvas中使用clip抠出一个区域的示例代码

May 25 HTML / CSS

Html5实现如何在两个div元素之间拖放图像

Mar 29 HTML / CSS

html5 datalist标签使用示例(自动完成组件)

May 04 HTML / CSS

Application Cache未缓存文件无法访问无法加载问题

May 31 HTML / CSS

HTML5超炫酷粒子效果的进度条的实现示例

Aug 23 HTML / CSS

canvas绘制树形结构可视图形的实现

Apr 03 HTML / CSS

浅谈由position属性引申的css进阶讨论

May 25 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

裁剪图片(1) PIL(1) 信号同步(1) 验证码(1) Flask(2) reduce()(1) GCN(1) 鲲鹏(1) Python(3) 进度条(1)

You might like

PHP实现恶意DDOS攻击避免带宽占用问题方法

2015/05/27 PHP

浅析php如何实现App常用的秒发功能

2016/08/03 PHP

CentOS 上搭建 PHP7 开发测试环境

2017/02/26 PHP

Thinkphp5框架实现获取数据库数据到视图的方法

2019/08/14 PHP

js精度溢出解决方案

2012/12/02 Javascript

JavaScript与DOM组合动态创建表格实例

2012/12/23 Javascript

js或者jquery判断图片是否加载完成实现代码

2013/03/20 Javascript

详解Jquery 遍历数组之$().each方法与$.each()方法介绍

2017/01/09 Javascript

Javascript(es2016) import和require用法和区别详解

2017/08/11 Javascript

jquery实现动态改变css样式的方法分析

2019/05/27 jQuery

js实现录音上传功能

2019/11/22 Javascript

浅谈vue中get请求解决传输数据是数组格式的问题

2020/08/03 Javascript

vue组件实现移动端九宫格转盘抽奖

2020/10/16 Javascript

[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4

2018/06/05 DOTA

Pycharm编辑器技巧之自动导入模块详解

2017/07/18 Python

python版本的仿windows计划任务工具

2018/04/30 Python

python切片及sys.argv[]用法详解

2018/05/25 Python

用Python shell简化开发

2018/08/08 Python

windows10下安装TensorFlow Object Detection API的步骤

2019/06/13 Python

深入了解Django中间件及其方法

2019/07/26 Python

python自动化实现登录获取图片验证码功能

2019/11/20 Python

Pycharm 安装 idea VIM插件的图文教程详解

2020/02/21 Python

Python+MySQL随机试卷及答案生成程序的示例代码

2021/02/01 Python

荷兰最大的儿童服装店：The Kids Republic

2019/04/13 全球购物

Sarenza德国：法国最大的时尚鞋和包包网上商店

2019/06/08 全球购物

乌克兰在线电子产品商店：MTA

2019/11/14 全球购物

2014全国两会心得体会

2014/03/17 职场文书

《云房子》教学反思

2014/04/20 职场文书

2014应届本科生自我评价

2014/09/13 职场文书

公司前台接待岗位职责

2015/04/03 职场文书

大学生先进个人主要事迹材料

2015/11/04 职场文书

canvas多重阴影发光效果实现

2021/04/20 Javascript

MySQL数据库必备之条件查询语句

2021/10/15 MySQL

PostgreSQL自动更新时间戳实例代码

2021/11/27 PostgreSQL

Windows server 2012搭建FTP服务器

2022/04/29 Servers

PyCharm 配置SSH和SFTP连接远程服务器

2022/05/11 Python