编程 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 media queries + jQuery实现响应式导航

Sep 30 HTML / CSS

纯CSS3打造动感漂亮时尚的扇形菜单

Mar 18 HTML / CSS

CSS3实现可关闭的下拉手风琴菜单效果

Aug 31 HTML / CSS

html5使用Canvas绘图的使用方法

Nov 21 HTML / CSS

HTML5的文档结构和新增标签完全解析

Apr 21 HTML / CSS

移动端html5 meta标签的神奇功效

Jan 06 HTML / CSS

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

Jul 10 HTML / CSS

html5 figure和figcaption的使用方法

Sep 10 HTML / CSS

HTML5 canvas实现的静态循环滚动播放弹幕

Jan 05 HTML / CSS

HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手

May 10 HTML / CSS

纯html+css实现奥运五环的示例代码

Aug 02 HTML / CSS

企业开发CSS命名BEM代码规范实践

Feb 12 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

思想汇报(404) 岗位职责(1324) 职业生涯规划书(234) 自我评价(886) 自我鉴定(671) 心得体会(660) 自荐信(981) 推荐信(292) 求职信(1029) 创业计划书(312)

You might like

用DBSQL类加快开发MySQL数据库程序的速度

2006/10/09 PHP

解析Ubuntu下crontab命令的用法

2013/06/24 PHP

php去掉URL网址中带有PHPSESSID的配置方法

2014/07/08 PHP

windows下配置php5.5开发环境及开发扩展

2014/12/25 PHP

php转换颜色为其反色的方法

2015/04/27 PHP

Yii2简单实现给表单添加验证码的方法

2016/07/18 PHP

PHP入门教程之PHP操作MySQL的方法分析

2016/09/11 PHP

PHP实现的策略模式示例

2019/03/20 PHP

Jquery Ajax学习实例7 Ajax所有过程事件分析示例

2010/03/23 Javascript

jquery+easeing实现仿flash的载入动画

2015/03/10 Javascript

JS+DIV实现鼠标划过切换层效果的方法

2015/05/25 Javascript

自定义刻度jQuery进度条及插件

2015/09/02 Javascript

js图片轮播效果实现代码

2020/04/18 Javascript

Angular使用ng-messages与PHP进行表单数据验证

2016/12/28 Javascript

jQuery时间验证和转换为标准格式的时间格式

2017/03/06 Javascript

JavaScript如何一次性展示几万条数据

2017/03/30 Javascript

vue-router实现tab标签页（单页面）详解

2017/10/17 Javascript

Vue下的国际化处理方法

2017/12/18 Javascript

使用Vue自定义指令实现Select组件

2018/05/24 Javascript

jQuery实现常见的隐藏与展示列表效果示例

2018/06/04 jQuery

element上传组件循环引用及简单时间倒计时的实现

2018/10/01 Javascript

vue 集成 vis-network 实现网络拓扑图的方法

2019/08/07 Javascript

python动态加载变量示例分享

2014/02/17 Python

使用Python编写vim插件的简单示例

2015/04/17 Python

200行自定义python异步非阻塞Web框架

2017/03/15 Python

python爬取网页转换为PDF文件

2018/06/07 Python

python中ImageTk.PhotoImage()不显示图片却不报错问题解决

2018/12/06 Python

使用Python3内置文档高效学习以及官方中文文档

2019/05/19 Python

numpy中三维数组中加入元素后的位置详解

2019/11/28 Python

CSS3 中filter（滤镜）属性使用详解

2020/04/07 HTML / CSS

美国真皮手袋品牌：GiGi New York

2017/03/10 全球购物

运动会报道稿300字

2014/10/02 职场文书

就业意向协议书

2015/01/29 职场文书

大国崛起英国观后感

2015/06/02 职场文书

《分一些蚊子进来》读后感3篇

2020/01/09 职场文书

Golang 获取文件md5校验的方法以及效率对比

2021/05/08 Golang