编程 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教程(8):CSS3透明度指南

Apr 02 HTML / CSS

一款纯css3实现的漂亮的404页面的实例教程

Nov 27 HTML / CSS

详解HTML5中的标签

Jun 19 HTML / CSS

HTML5应用之文件上传

Dec 30 HTML / CSS

你可能不熟练的十个前端HTML5经典面试题

Jul 03 HTML / CSS

在HTML5 Canvas中放入图片和保存为图片的方法

May 03 HTML / CSS

浅谈html5 video 移动端填坑记

Jan 15 HTML / CSS

html5实现输入框fixed定位在屏幕最底部兼容性

Jul 03 HTML / CSS

AmazeUI导航的示例代码

Aug 14 HTML / CSS

AmazeUI 面板的实现示例

Aug 17 HTML / CSS

HTML5在手机端实现视频全屏展示方法

Nov 23 HTML / CSS

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

May 10 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) 大话西游(1) FS1016(1) 死亡搁浅(1) 铁拳(1) 原神(1) 模拟人生(1) AGC(1) 绿林侠盗(1) 74HC4066(1)

You might like

PHP cron中的批处理

2008/09/16 PHP

vs中通过剪切板循环来循环粘贴不同内容

2011/04/30 PHP

PHP网页游戏学习之Xnova(ogame)源码解读（一）

2014/06/23 PHP

thinkPHP5框架auth权限控制类与用法示例

2018/06/12 PHP

thinkPHP框架整合tcpdf插件操作示例

2018/08/07 PHP

php实现根据身份证获取精准年龄

2020/02/26 PHP

Javascript之文件操作

2007/03/07 Javascript

基于JQuery的模拟苹果桌面Dock效果(稳定版)

2012/10/15 Javascript

$.get获取一个文件的内容示例代码

2013/09/11 Javascript

JS中怎样判断undefined(比较不错的方法)

2014/03/27 Javascript

escape编码与unescape解码汉字出现乱码的解决方法

2014/07/02 Javascript

深入理解javascript作用域和闭包

2014/09/23 Javascript

jQuery 1.9.1源码分析系列（十五)之动画处理

2015/12/03 Javascript

全面解析JavaScript里的循环方法之forEach，for-in，for-of

2020/04/20 Javascript

JQuery中的常用事件、对象属性与使用方法分析

2019/12/23 jQuery

[02:36]DOTA2亚洲邀请赛小组赛精彩集锦：EE凭借法力虚空拿下4杀

2017/03/30 DOTA

[59:00]DOTA2-DPC中国联赛正赛 Ehome vs PSG.LGD BO3 第一场 3月7日

2021/03/11 DOTA

python获取android设备的GPS信息脚本分享

2015/03/06 Python

Python实现批量转换文件编码的方法

2015/07/28 Python

django限制匿名用户访问及重定向的方法实例

2018/02/07 Python

在python3.5中使用OpenCV的实例讲解

2018/04/02 Python

Python selenium抓取微博内容的示例代码

2018/05/17 Python

python版opencv摄像头人脸实时检测方法

2018/08/03 Python

Python查找文件中包含中文的行方法

2018/12/19 Python

前端隐藏出边界内容的实现方法

2016/04/14 HTML / CSS

丝芙兰加拿大官方网站：SEPHORA加拿大

2018/11/20 全球购物

Pretty Green美国：英式摇滚服饰风格代表品牌之一

2019/01/23 全球购物

anello泰国官方网站：日本流行包包品牌

2019/08/08 全球购物

现金会计岗位职责

2013/12/05 职场文书

社团文化节策划书

2014/02/01 职场文书

奠基仪式策划方案

2014/05/15 职场文书

高中校园广播稿

2014/10/21 职场文书

2014年英语教学工作总结

2014/12/17 职场文书

2015年新学期寄语

2015/02/26 职场文书

导游词之台湾安平古堡

2019/12/25 职场文书

Django操作cookie的实现

2021/05/26 Python