编程 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仿造window7的开始菜单

Jun 17 HTML / CSS

css3教程之倾斜页面

Jan 27 HTML / CSS

细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果

Jul 21 HTML / CSS

CSS3圆角和渐变2种常用功能详解

Jan 06 HTML / CSS

CSS3 @keyframes简单动画实现

Feb 24 HTML / CSS

CSS3 实现footer 固定在底部(无论页面多高始终在底部)

Oct 15 HTML / CSS

CSS3为背景图设置遮罩并解决遮罩样式继承问题

Jun 22 HTML / CSS

HTML5 Video标签的属性、方法和事件汇总介绍

Apr 24 HTML / CSS

在HTML5中使用MathML数学公式的简单讲解

Feb 19 HTML / CSS

浅析HTML5页面元素及属性

Jan 20 HTML / CSS

HTML速写之Emmet语法规则的实现

Apr 07 HTML / CSS

HTML中的表单元素介绍

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

while(1) cvzone(1) 无限迭代(1) mediapipe(1) 事件调度器(1) 分词器(1) 计算机视觉(2) for(1) okenizer(1) re模块(2)

You might like

PHP让数组中有相同值的组成新的数组实例

2017/12/31 PHP

javascript编程起步（第二课）

2007/01/10 Javascript

JQuery的ajax基础上的超强GridView展示

2009/09/18 Javascript

使用jQuery将多条数据插入模态框的实现代码

2014/10/08 Javascript

js原生跨域_用script标签的简单实现

2016/09/24 Javascript

Vue-cli proxyTable 解决开发环境的跨域问题详解

2017/05/18 Javascript

package.json文件配置详解

2017/06/15 Javascript

React Native预设占位placeholder的使用

2017/09/28 Javascript

vue-router2.0 组件之间传参及获取动态参数的方法

2017/11/10 Javascript

js实现手机web图片左右滑动效果

2017/12/29 Javascript

浅谈webpack-dev-server的配置和使用

2018/05/17 Javascript

webpack css加载和图片加载的方法示例

2018/09/11 Javascript

vue2 中二级路由高亮问题及配置方法

2019/06/10 Javascript

VUE解决 v-html不能触发点击事件的问题

2019/10/28 Javascript

vue.js 子组件无法获取父组件store值的解决方式

2019/11/08 Javascript

react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

2019/11/12 Javascript

Vue 中 a标签上href无法跳转的解决方式

2019/11/12 Javascript

[00:08]DOTA2勇士令状等级奖励“天外飞星”

2019/05/24 DOTA

Python中encode()方法的使用简介

2015/05/18 Python

python列表生成式与列表生成器的使用

2018/02/23 Python

python opencv人脸检测提取及保存方法

2018/08/03 Python

python实现列表中最大最小值输出的示例

2019/07/09 Python

Django admin禁用编辑链接和添加删除操作详解

2019/11/15 Python

Html5 语法与规则简要概述

2014/07/29 HTML / CSS

欧舒丹比利时官网：L’OCCITANE比利时

2017/04/25 全球购物

建筑行业的大学生自我评价

2013/12/08 职场文书

农村婚礼证婚词

2014/01/08 职场文书

美术毕业生求职信

2014/02/25 职场文书

工作岗位说明书模板

2014/05/09 职场文书

质量标语大全

2014/06/12 职场文书

信访维稳工作汇报

2014/10/27 职场文书

公司行政主管岗位职责

2015/04/09 职场文书

2015年个人工作总结报告

2015/04/25 职场文书

宣传委员竞选稿

2015/11/19 职场文书

技术入股协议书

2016/03/22 职场文书

HTTP中的Content-type详解

2022/01/18 HTML / CSS