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

使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法

Apr 03 HTML / CSS

CSS3制作圆角图片和椭圆形图片

Jul 08 HTML / CSS

2分钟教你实现环形/扇形菜单(基础版)

Jan 15 HTML / CSS

CSS3实现文字描边的2种方法(小结)

Feb 14 HTML / CSS

CSS3中引入多种自定义字体font-face

Jun 12 HTML / CSS

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

Jan 09 HTML / CSS

html5 worker 实例(一) 为什么测试不到效果

Jun 24 HTML / CSS

boostrap modal 闪现问题的解决方法

Sep 01 HTML / CSS

CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

Mar 30 HTML / CSS

CSS3实现列表无限滚动/轮播效果

Jun 23 HTML / CSS

CSS实现单选折叠菜单功能

Nov 01 HTML / CSS

纯CSS如何禁止用户复制网页的内容

Nov 01 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) HAM-2000(1) 文书(291) explain(2) 守望先锋(1) 波段(1) Docker(14) 西索(1) AngularJS(2) 帝国时代(1)

You might like

晋城吧对DiscuzX进行的前端优化要点

2010/09/05 PHP

php实现基于pdo的事务处理方法示例

2017/07/21 PHP

PHP PDOStatement::bindColumn讲解

2019/01/30 PHP

JavaScript 应用类库代码

2008/06/02 Javascript

JQuery 浮动导航栏实现代码

2009/08/27 Javascript

JS OOP包机制,类创建的方法定义

2009/11/02 Javascript

JS控制显示隐藏兼容问题(IE6、IE7、IE8)

2010/04/01 Javascript

js为数字添加逗号并格式化数字的代码

2013/08/23 Javascript

Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

2014/09/01 Javascript

Node.js和MongoDB实现简单日志分析系统

2015/04/25 Javascript

JavaScript setTimeout使用闭包功能实现定时打印数值

2015/12/18 Javascript

全面解析Bootstrap中transition、affix的使用方法

2016/05/30 Javascript

jQuery动态改变多行文本框高度的方法

2016/09/07 Javascript

Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)

2016/10/25 Javascript

JS实现的系统调色板完整实例

2016/12/21 Javascript

Three.js利用Detector.js插件如何实现兼容性检测详解

2017/09/26 Javascript

vue router的基本使用和配置教程

2018/11/05 Javascript

python类:class创建、数据方法属性及访问控制详解

2016/07/25 Python

Django学习笔记之Class-Based-View

2017/02/15 Python

Python 列表(List) 的三种遍历方法实例详解

2017/04/15 Python

解决python 未发现数据源名称并且未指定默认驱动程序的问题

2018/12/07 Python

Python 多线程不加锁分块读取文件的方法

2018/12/11 Python

Python装饰器使用你可能不知道的几种姿势

2019/10/25 Python

Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space

2020/02/23 Python

CSS3效果：自定义“W”形运行轨迹实例

2017/03/29 HTML / CSS

HTML5中5个简单实用的API（第二篇，含全屏、可见性、拍照、预加载、电池状态）

2014/05/07 HTML / CSS

日本食品网上商店：JaponShop.com

2017/11/28 全球购物

Mio Skincare法国官网：身体紧致及孕期身体护理

2018/04/04 全球购物

德国高端单身人士交友网站：ElitePartner

2018/12/02 全球购物

阿迪达斯英国官方网站：adidas英国

2019/08/13 全球购物

俄罗斯购买自行车网站：Vamvelosiped

2021/01/29 全球购物

文明教师事迹材料

2014/01/16 职场文书

技术经济专业求职信

2014/09/03 职场文书

教师师德承诺书2016

2016/03/25 职场文书

教你使用一行Python代码玩遍童年的小游戏

2021/08/23 Python

python套接字socket通信

2022/04/01 Python