基于html5的矢量图绘制方法研究,HTML5程序设计-绘制可伸缩矢量图形SVG.pdf

HTML5基础教程(第2版)

授课教师：

职务：

第7章绘制可伸缩矢量图形(SVG )

课程描述

SVG是Scalable Vector

Graphics的缩写，即可伸缩矢量

图形，它使用XML格式在Web上定

义基于矢量的图形。矢量图形是

根据几何特性来绘制的图形，矢

量(vector)可以是一个点或一

条线。矢量图以几何图形居多，

图形可以无限放大，不变色、不

模糊。常用于图案、标志、文字

等设计。

HTML5对SVG提供了很好的支持，

可以直接在HTML网页中嵌入SVG

元素。本章介绍在HTML5中如何

绘制SVG图形。

本章知识点

p7.1 SVG概述

p7.2 SVG形状

p7.3 线条和填充

p7.4 SVG文本与图片

p7.5 SVG 滤镜

p7.6 渐变颜色

p7.7 变换坐标系

7.1 SVG概述

p 7.1.1 SVG的特性

p 7.1.2 XML 基础

p 7.1.3 一个SVG实例

p 7.1.4 SVG坐标系统

p 7.1.5 在HTML5中使用SVG

7.1.1 SVG的特性

与JPEG和GIF等格式的图像相比，SVG图像

主要具有如下优势：

 SVG图像可以使用任何文本编辑器创建和

编辑，而JPEG和GIF等格式的图像则必须

使用专用的图像编辑软件创建和编辑。

 SVG图像更易于压缩、搜索(适用于制作

地图)、索引和脚本化。

 缩放SVG图像时，图像不变形。

 可以在任何分辨率下打印高质量的SVG图

像。

SVG与Canvas相比的异同如下

 SVG是在XML中描述二维图像的语言；而

Canvas则在JavaScript程序中绘制二维图

像。

 在SVG中，每一个绘制的图形都会被记录

为一个对象，当SVG对象的属性变化时，

浏览器会自动重画图形。

 Canvas图像是一个像素一个像素绘制的，

一旦图像绘制完成，浏览器就会忘了它。

如果图像的位置变化了，那么场景都要重

画，包括被该图像覆盖的对象。

7.1.2 XML 基础

p与HTML相同，XML也是一种标记语言。但

是，XML是可扩展的，它没有HTML中那些

预先定义好的标记，用户可以创建自定义

元素以满足使用需要，这无疑大大增加了

XML的灵活性和应用领域。当然，XML文档

不可能是没有限制的，它必须遵守一个特

殊的结构。

下面是一个简单的XML文档

standalone="yes"?>

小李

男

北京市海淀区

1300

小张

女

北京市西城区

1360

XML声明包含3个属性，具体说明如下

 version属性指明了XML的版本。

 encoding属性定义了文档中使用的编码格式，

gb2312指定使用GB2312码。GB2312码是中华人

民共和国国家汉字信息交换用编码，全称《信

息交换用汉字编码字符集——基本集》，由国

家标准总局发布。

 standalone属性指定XML文档是否依赖外部定

基于html5的矢量图绘制方法研究,HTML5程序设计-绘制可伸缩矢量图形SVG.pdf相关推荐

基于html5的数据可视化实现方法研究,基于HTML5的数据可视化实现方法研究
信息科技 Information Technology 基于HTML5的数据可视化实现方法研究高科同济大学电子与信息学院,上海 201804摘要 HTML5的出现,为数据可视化提供了新的实现方法.本 ...
基于MATLAB的多项式数据拟合方法研究-毕业论文
摘要:本论文先介绍了多项式数据拟合的相关背景,以及对整个课题做了一个完整的认识.接下来对拟合模型,多项式数学原理进行了详细的讲解,通过对文献的阅读以及自己的知识积累对原理有了一个系统的认识.介绍多项式 ...
基于深度学习的动物识别方法研究与实现
基于深度学习的动物识别方法研究与实现目录摘要 I ABSTRACT II 第一章绪论 1 1.1 研究的目的和意义 1 1.2国内外研究现状 1 1.2.1 目标检测国内外研究 ...
基于MMS街景的导航数据采集方法研究
基于MMS街景的导航数据采集方法研究李观石,刘波,陆藩藩,宋法奇 (江苏省基础地理信息中心,江苏南京 210013) 摘要本文利用MMS街景数据,结合基础地理信息数据进行导航数据的 ...
论文精读-基于双目图像的视差估计方法研究以及实现
基于双目图像的视差估计方法研究及实现第一章绪论 1.1 课题的研究背景与意义 1.2 双目视差估计的研究现状 1.2.1 传统立体匹配方法研究现状 1.2.2 统计学习方法研究现状 1.2.3 深 ...
直觉模糊有计算机知识嘛,基于直觉模糊集理论的IDS方法研究-计算机科学.PDF
基于直觉模糊集理论的IDS方法研究-计算机科学第卷第期计算机科学 45 11A Vol．45No．11A 年月 2018 11 COMPUTER SCIENCE Nov．2018 ...
基于主动学习的高光谱图像分类方法研究
最近在看主动学习的图像分割方法,其实就是选取样本点的问题,写在博客上以供日后参考,记录.原文来自一篇硕士文章<<基于主动学习的高光谱图像分类方法研究>>–王依萍,注明出处,现简 ...
latex中插入visio矢量图的方法
其实,我们用visio画的都是矢量图,只是我们通常转换成位图(jpg等格式)后再使用,这样其实就失去了矢量图的价值了.这里讲一种在latex中插入viso生成的矢量图的方法. 首先,在我们的电脑中安装 ...
基于迁移学习的旋转机械故障诊断方法研究学习笔记
基于迁移学习的旋转机械故障诊断方法研究学习笔记现在大一点的神经网络模型也要求数据量的足够大,但是对于小样本的数据,有一些神经网络模型也能够处理的很好 2. 这是现在神经网络也要求的数据最好能够独立同 ...

基于html5的矢量图绘制方法研究,HTML5程序设计-绘制可伸缩矢量图形SVG.pdf

基于html5的矢量图绘制方法研究,HTML5程序设计-绘制可伸缩矢量图形SVG.pdf相关推荐

最新文章

热门文章