突袭HTML5之SVG.docx
《突袭HTML5之SVG.docx》由会员分享，可在线阅读，更多相关《突袭HTML5之SVG.docx（88页珍藏版）》请在冰点文库上搜索。
突袭HTML5之SVG
突袭HTML5之SVG2D入门1-SVG综述
位图与矢量图
以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。
在光栅图像中，图像文件定义了图像中每个像素的颜色值。
浏览器需要读取这些值并做出相应行动。
这种图像的再现能力比较强，但是在某些情形下会显得不足。
例如，当浏览器以不同大小显示一副图像时，通常会产生锯齿边缘，这时，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值；这样会导致图像失真。
此外，针对位图进行动画，最多也仅限于生成“翻动书本”类型的动画，即快速连续地显示单独图像。
矢量图通过指定为确定每个像素的值所需的指令而不是指定这些值本身，克服了这些困难中的一部分。
例如，向量图形不再为一个直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器（或插件）做其余事情。
这消除了光栅图形的许多限制；使用向量图形，浏览器只要知道它必须画一个圆。
如果图像需要以正常大小的三倍来显示，那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。
类似地，浏览器接收的指令可以更容易地与外部信息源（如应用程序和数据库）绑定，要对图像制作动画，浏览器只要接收有关如何操纵属性（如半径或颜色）的指令即可。
HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。
这两种技术都支持绘制矢量图和光栅图。
SVG概述
可缩放矢量图形（ScalableVectorGraphics，简称SVG）是一种使用XML来描述二维图形的语言（SVG严格遵从XML语法）。
SVG允许三种类型的图形对象：
矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。
可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。
SVG功能集包括嵌套转换、剪切路径、alpha蒙板和模板对象。
SVG绘图是交互式和动态的。
例如，可使用脚本来定义和触发动画。
这一点与Flash相比很强大。
Flash是二进制文件，动态创建和修改都比较困难。
而SVG是文本文件，动态操作是相当容易的。
而且，SVG直接提供了完成动画的相关元素，操作起来非常方便。
SVG与其他Web标准兼容，并直接支持文档对象模型DOM。
这一点也是与HTML5中的canvas相比很强大的地方（这里注意，SVG内部也是用一个类似的canvas这样的东西来展示SVG图形，到后面你会发现很多特性和HTML5的canvas还有点像；文中如果没明确说明是SVG的canvas的话，都代指HTML5中的canvas元素）。
因而，可以很方便的使用脚本实现SVG的很多高级应用。
而且SVG的图形元素基本上都支持DOM中的标准事件。
可将大量事件处理程序（如“onmouseover”和“onclick”）分配给任何SVG图形对象。
虽然SVG的渲染速度比不上canvas元素，但是胜在DOM操作很灵活，这个优势完全可以弥补速度上的劣势。
SVG既可以说是一种协议，也可以说是一门语言；既是HTML的一个标准元素，也是一种图片格式。
SVG并不是HTML5中的东西，但是也算页面时兴的技术之一，姑且也放到这个专题下了。
SVG与其它图片格式的比较
SVG与其它的图片格式相比，有很多优点（很多优点来源于矢量图的优点）：
•SVG文件是纯粹的XML，可被非常多的工具读取和修改（比如记事本）。
•SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
•SVG是可伸缩的，可在图像质量不下降的情况下被放大，可在任何的分辨率下被高质量地打印。
•SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。
•SVG可以与Java技术一起运行。
•SVG是开放的标准。
SVG与Flash的比较
SVG的主要竞争者是Flash。
与Flash相比，SVG最大的优势是它与其他标准（比如XSL和DOM）相兼容，操作方便，而Flash则是未开源的私有技术。
其它的比如存储的格式，动态生成图形等方面，SVG也占有很大的优势。
SVG的呈现方式
关于支持HTML5与SVG的浏览器不是这里讨论的重点，基本上装上最新的Chrome或者FireFox浏览器就差不多了（IE用户请装IE9就对了，至于IE9之前的版本，需要装SVG的插件，这里就直接略过了）。
对于直接支持SVG的浏览器，SVG主要采用两面两种呈现的方式。
内联到HTML
SVG是标准的HTML元素，直接写到HTML中就可以了，看下面的例子：
xml version="1.0" encoding="UTF-8"?
>
DOCTYPE html>
-- -->
My First SVG Page //www.w3.org/2000/svg" version="1.1"
width="200px" height="200px">
fill="none" stroke="black"/>
style="stroke:
black; fill:
red;"/>
请注意开头的部分xml声明，与svg的命名空间xmlns、版本version等部分，主要是考虑兼容性的问题；这些部分在HTML5中基本都可以不用写了（写不写还是自己瞧着办吧）。
独立SVG文件
独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。
在浏览器中嵌入这个svg文件就可以使用了。
1.独立的SVG文件/页面，定义的模板基本就像下面的一样：
-- SVG markup here. -->
把这样的文本文件保存成以svg为扩展名的文件，例如sun.svg，这样的文件可以直接用浏览器打开浏览，也可以作为引用嵌入到别的页面中。
2.HTML引用外部的SVG文件。
使用object或者img元素嵌入svg图形就可以了，例如下面的小例子：
DOCTYPE html>
My First SVG Page
width="300px" height="300px">
-- Implement fallback code here, or display a message:
-->
Your browser does not support SVG - please upgrade to a modern browser.
" />
其实SVG也可以放在其他的XML文档中，也可以像其他的XML文档一样，使用XML相关的技术格式化和验证，这个不是重点，此处略去了。
SVG的渲染顺序
SVG是严格按照定义元素的顺序来渲染的，这个与HTML靠z-index值来控制分层不一样。
在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。
后渲染的元素会覆盖前面的元素，虽然有时候受透明度影响，看起来不是被覆盖的，但是SVG确实是严格按照先后顺序来渲染的。
注意：
SVG是以XML定义的，所以是大小写敏感的，这点与HTML不一样。
突袭HTML5之SVG2D入门2-图形绘制
基本形状
SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了。
废话不说了，直接看例子，这个最直接：
stroke="orange" fill="transparent" stroke-width="5"/>
stroke="green" fill="transparent" stroke-width="5"/>
这段HTML显示的结果如下：
这个例子画了很多形状：
正常的矩形，带圆角的矩形，圆形，椭圆形，直线，折线，多边形，还有路径。
这些都属于基本的图形元素。
虽然绘制一个图形有很多种方式，比如矩形可以用rect实现，也可以用path等实现，但是我们还是应该尽量保持SVG的内容短小精悍，易于阅读。
下面是每个形状的使用说明（这里只介绍控制图形形状和位置的基本属性，填充等属性放到后面总结）。
矩形-rect元素
这个元素有6个控制位置和形状的属性，分别是：
x：
矩形左上角的坐标（用户坐标系）的x值。
y：
矩形左上角的坐标（用户坐标系）的y值。
width：
矩形宽度。
height：
矩形高度。
rx：
实现圆角效果时，圆角沿x轴的半径。
ry：
实现圆角效果时，圆角沿y轴的半径。
比如上面例子中，实现了圆角效果，你也可以通过设置rx,ry为不同的值实现椭圆角效果。
圆-circle元素
这个元素的属性很简单，主要是定义圆心和半径：
r：
圆的半径。
cx：
圆心坐标x值。
cy：
圆心坐标y值。
椭圆-ellipse元素
这个是更加通用的圆形元素，你可以分别控制半长轴和半短轴的长度，来实现不同的椭圆，很容易想到，当两个半轴相等时，就是正圆形了。
rx：
半长轴（x半径）。
ry：
半短轴（y半径）。
cx：
圆心坐标x值。
cy：
圆心坐标y值。
直线-line元素
直线需要定义起点与终点即可：
x1：
起点x坐标。
y1：
起点y坐标。
x2：
终点x坐标。
y2：
终点y坐标。
折线-polyline元素
折线主要是要定义每条线段的端点即可，所以只需要一个点的集合作为参数：
points：
一系列的用空格，逗号，换行符等分隔开的点。
每个点必须有2个数字：
x值和y值。
所以下面3个点（0,0）,（1,1）和（2,2）可以写成：
"00,11,22"。
多边形-polygon元素
这个元素就是比polyline元素多做一步，把最后一个点和第一个点连起来，形成闭合图形。
参数是一样的。
points：
一系列的用空格，逗号，换行符等分隔开的点。
每个点必须有2个数字：
x值和y值。
所以下面3个点（0,0）,（1,1）和（2,2）可以写成：
"00,11,22"。
路径-path元素
这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。
这个元素控制位置和形状的只有一个参数：
d：
一系列绘制指令和绘制参数（点）组合成。
绘制指令分为绝对坐标指令和相对坐标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，坐标也是绝对坐标；相对指令使用对应的小写字母，点的坐标表示的都是偏移量。
绝对坐标绘制指令
这组指令的参数代表的是绝对坐标。
假设当前画笔所在的位置为（x0,y0），则下面的绝对坐标指令代表的含义如下所示：
指令
参数
说明
M
xy
将画笔移动到点（x,y）
L
xy
画笔从当前的点绘制线段到点（x,y）
H
x
画笔从当前的点绘制水平线段到点（x,y0）
V
y
画笔从当前的点绘制竖直线段到点（x0,y）
A
rxryx-axis-rotationlarge-arc-flagsweep-flagxy
画笔从当前的点绘制一段圆弧到点（x,y）
C
x1y1,x2y2,xy
画笔从当前的点绘制一段三次贝塞尔曲线到点（x,y）
S
x2y2,xy
特殊版本的三次贝塞尔曲线（省略第一个控制点）
Q
x1y1,xy
绘制二次贝塞尔曲线到点（x,y）
T
xy
特殊版本的二次贝塞尔曲线（省略控制点）
Z
无参数
绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。
移动画笔指令M，画直线指令：
L，H，V，闭合指令Z都比较简单；下面重点看看绘制曲线的几个指令。
绘制圆弧指令：
A rxryx-axis-rotationlarge-arc-flagsweep-flagxy
用圆弧连接2个点比较复杂，情况也很多，所以这个命令有7个参数，分别控制曲线的的各个属性。
下面解释一下数值的含义：
rx,ry是弧的半长轴、半短轴长度
x-axis-rotation是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针转动的角度。
large-arc-flag为1表示大角度弧线，0代表小角度弧线。
sweep-flag为1代表从起点到终点弧线绕中心顺时针方向，0代表逆时针方向。
x,y是弧终端坐标。
前两个参数和后两个参数就不多说了，很简单；下面就说说中间的3个参数：
x-axis-rotation代表旋转的角度，体会下面例子中圆弧的不同：
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
上面的HTML画出下面的图形：
从图中可以看到椭圆旋转参数的不同导致绘制的圆弧方向不同，当然这个参数对正圆来说没有影响。
large-arc-flag和sweep-flag控制了圆弧的大小和走向，体会下面例子中圆弧的不同：
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
A 45 45, 0, 1, 0, 275 125
L 275 80 Z" fill="red"/>
A 45 45, 0, 0, 1, 125 275
L 125 230 Z" fill="purple"/>
A 45 45, 0, 1, 1, 275 275
L 275 230 Z" fill="blue"/>
这个HTML绘制了下面的几幅图：
从上面可以看出，这几个参数其实是唯一确定一段圆弧需要的参数。
这里也看到，SVG中的圆弧比canvas中的复杂一些。
绘制三次贝塞尔曲线指令：
C x1y1,x2y2,xy
三次贝塞尔曲线有两个控制点，就是（x1,y1）和（x2,y2），最后面（x,y）代表曲线的终点。
体会下面的例子：
这个HTML片段绘制了下面的图形：
从上面我们可以看到，控制点控制了曲线的弧度。
特殊版本的三次贝塞尔曲线：
S x2y2,xy
很多时候，为了绘制平滑的曲线，需要多次连续绘制曲线。
这个时候，为了平滑过渡，常常第二个曲线的控制点是第一个曲线控制点在曲线另外一边的映射点。
这个时候可以使用这个简化版本。
这里要注意的是，如果S指令前面没有其他的S指令或C指令，这个时候会认为两个控制点是一样的，退化成二次贝塞尔曲线的样子；如果S指令是用在另外一个S指令或者C指令后面，这个时候后面这个S指令的第一个控制点会默认设置为前面的这个曲线的第二个控制点的一个映射点，体会一下：
这个HTML片段绘制如下图形：
上面的S指令只有第二个控制点，第一个控制点采用了前面的曲线指令的第二个控制点的一个映射点。
绘制二次贝塞尔曲线指令：
Q x1y1,xy ， Txy （特殊版本的二次贝塞尔曲线）
二次贝塞尔曲线只有一个控制点（x1,y1），通常如下图所示：
如果是连续的绘制曲线，同样可以使用简化版本T。
同样的，只有T前面是Q或者T指令的时候，后面的T指令的控制点会默认设置为前面的曲线的控制点的映射点，体会一下：
这个HTML片段绘制如下图形：
同样的，如果T指令前面不是Q或者T指令，则认为无控制点，画出来的是直线。
相对坐标绘制指令
与绝对坐标绘制指令的字母是一样的，只不过全部是小写表示。
这组指令的参数中涉及坐标的参数代表的是相对坐标，意思就是参数代表的是从当前点到目标点的偏移量，正数就代表向轴正向偏移，负数代表向反向偏移。
不过对Z指令来说，大小写没有区别。
这里要注意，绝对坐标指令与相对坐标指令是可以混合使用的。
有时混合使用可以带来更灵活的画法。
SVGpath绘制注意事项：
绘制带孔的图形时要注意：
外层边的绘制需要是逆时针顺序的，里面的洞的边的顺序必须是顺时针的。
只有这样绘制的图形填充效果才会正确。
突袭HTML5之SVG2D入门3-文本与图像
SVG中渲染文本
SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件。
任何可以在形状或路径上执行的操作
升级会员 