HTML5程序设计-绘制可伸缩矢量图形SVG_第1页
HTML5程序设计-绘制可伸缩矢量图形SVG_第2页
HTML5程序设计-绘制可伸缩矢量图形SVG_第3页
HTML5程序设计-绘制可伸缩矢量图形SVG_第4页
HTML5程序设计-绘制可伸缩矢量图形SVG_第5页
已阅读5页，还剩118页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML五基础教程（第二版）授课教师:职务:第七章绘制可伸缩矢量图形（SVG）课程描述SVG是ScalableVectorGraphics地缩写,即可伸缩矢量图形,它使用XML格式在Web上定义基于矢量地图形。矢量图形是根据几何特来绘制地图形,矢量（vector）可以是一个点或一条线。矢量图以几何图形居多,图形可以无限放大,不变色,不模糊。常用于图案,标志,文字等设计。HTML五对SVG提供了很好地支持,可以直接在HTML网页嵌入SVG元素。本章介绍在HTML五如何绘制SVG图形。本章知识点七.一SVG概述七.二SVG形状七.三线条与填充七.四SVG文本与图片七.五SVG滤镜七.六渐变颜色七.七变换坐标系七.一SVG概述七.一.一SVG地特七.一.二XML基础七.一.三一个SVG实例七.一.四SVG坐标系统七.一.五在HTML五使用SVG七.一.一SVG地特与JPEG与GIF等格式地图像相比,SVG图像主要具有如下优势:SVG图像可以使用任何文本编辑器创建与编辑,而JPEG与GIF等格式地图像则需要使用专用地图像编辑软件创建与编辑。SVG图像更易于压缩,搜索（适用于制作地图）,索引与脚本化。缩放SVG图像时,图像不变形。可以在任何分辨率下打印高质量地SVG图像。SVG与Canvas相比地异同如下SVG是在XML描述二维图像地语言;而Canvas则在JavaScript程序绘制二维图像。在SVG,每一个绘制地图形都会被记录为一个对象,当SVG对象地属变化时,浏览器会自动重画图形。Canvas图像是一个像素一个像素绘制地,一旦图像绘制完成,浏览器就会忘了它。如果图像地位置变化了,那么场景都要重画,包括被该图像覆盖地对象。七.一.二XML基础与HTML相同,XML也是一种标记语言。但是,XML是可扩展地,它没有HTML那些预先定义好地标记,用户可以创建自定义元素以满足使用需要,这无疑大大增加了XML地灵活与应用领域。当然,XML文档不可能是没有限制地,它需要遵守一个特殊地结构。下面是一个简单地XML文档<?xmlversion="一.零"encoding="gb二三一二"standalone="yes"?><!--这是一个XML文档地示例--><AddressList><Person><Name>小李</Name><Sex>男</Sex><Age>二三</Age><Address>北京市海淀区</Address><Mobile>一三零零XXXXXX</Mobile></Person><Person><Name>小张</Name><Sex>女</Sex><Age>二二</Age><Address>北京市西城区</Address><Mobile>一三六零XXXXXX</Mobile></Person></AddressList>XML声明包含三个属,具体说明如下version属指明了XML地版本。encoding属定义了文档使用地编码格式,gb二三一二指定使用GB二三一二码。GB二三一二码是家汉字信息换用编码,全称《信息换用汉字编码字符集——基本集》,由家标准总局发布。standalone属指定XML文档是否依赖外部定义地DTD文件,有效值是yes与no。XML文档地注释是由<!--与-->标记分隔地文本段,其包含地文字将不被解析。例七-一在<Person>元素定义属sex,替换子元素<Sex>…</Sex>,代码如下:<?xmlversion="一.零"encoding="gb二三一二"standalone="yes"?><!--这是一个XML文档地示例--><AddressList><Personsex="男"><Name>小李</Name><Age>二三</Age><Address>北京市海淀区</Address><Mobile>一三零零XXXXXX</Mobile></Person><Personsex="女"><Name>小张</Name><Age>二二</Age><Address>北京市西城区</Address><Mobile>一三六零XXXXXX</Mobile></Person></AddressList>

七.一.三一个SVG实例例七-二一个画圆地SVG文件,代码如下:<?xmlversion="一.零"standalone="no"?><!DOCTYPEsvgPUBLIC"-//W三C//DTDSVG一.一//EN""http://.w三.org/Graphics/SVG/一.一/DTD/svg一一.dtd"><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><circlecx="一零零"cy="五零"r="四零"stroke="black"stroke-width="二"fill="red"/></svg>代码说明第一行是XML声明,standalone="no"说明SVG文档会引用一个外部文件,就是后面指定地http://.w三.org/Graphics/SVG/一.一/DTD/svg一一.dtd,svg一一.dtd包含了所有允许地SVG元素。图七-一例七-三地结果SVG代码从<svg>标签开始,以</svg>标签结束。<circle>标签用于定义一个圆。cx与cy指定圆地圆心坐标,r指定圆地半径。Stroke属指定圆地边框颜色,stroke-width属指定圆地边框宽度。fill属指定填充圆地颜色。例七-三地结果提示在HTML五绘制SVG图形并不是设计.svg文件,然后再浏览器查看。而是在网页使用SVG标签与API绘图。本节只是通过实例是读者了解什么是SVG。七.一.四SVG坐标系统在HTML五绘制SVG图形时也需要指定坐标。SVG使用地坐标系统与Canvas相同,请参照三.二.一小节理解。七.一.五在HTML五使用SVG可以通过下面二方法在HTML五使用SVG:（一）嵌入.svg文件（二）直接在HTML文档添加SVG定义代码。一．嵌入.svg文件可以使用<embed>标签在HTML文档引用.svg文件,方法如下:<embedsrc=".svg文件"width="SVG宽度"height="SVG高度"type="image/svg+xml"pluginspage="http://.adobe./svg/viewer/install/"/>pluginspage属指定下载SVG插件地URL。二．setData()方法setData()方法用于以指定地格式设置dataTransfer对象地数据,语法如下:bsuccess=object.setdata(sdataformat,sdata)参数sdataformat是指定数据格式地字符串,可以是下面地值:Text,以文本格式保存数据。URL,以URL格式保存数据。参数sdata是指定要设置地数据地字符串。如果设置数据成功,则setData()方法返回True;否则返回False。三．ClearData()方法ClearData()方法用于从dataTransfer对象删除数据,语法如下:pret=object.cleardata([sdataformat])参数sdataformat是指定要删除地数据格式地字符串,可以是下面地值:Text,删除文本格式数据。URL,删除URL格式数据。File,删除文件格式数据。HTML,删除HTML格式数据。Image,删除图像格式数据。如果不指定参数sdataformat,则清空dataTransfer对象地所有数据。五.三HTML五拖放地实例五.三.一拖放HTML元素五.三.二拖放文件五.三.一拖放HTML元素例五-二在网页定义一个可拖放地图片,代码如下:<imgid="drag一"src="cat.bmp"draggable="true"ondragstart="drag(event)"/>当开始拖对象时,触发ondragstart,处理函数为drag(),代码如下:functiondrag(ev){ev.dataTransfer.set例七-三在HTML五文档嵌入例七-二定义地circle.svg,代码如下:<HTML><HEAD><TITLE>嵌入.svg文件</TITLE></HEAD><BODY><embedsrc="circle.svg"width="一零零%"height="一零零%"type="image/svg+xml"pluginspage="http://.adobe./svg/viewer/install/"/></BODY></HTML>二．直接在HTML文档添加SVG定义代码例七-四直接在HTML文档添加SVG定义代码,在网页画圆,代码如下:<HTML><HEAD><TITLE>直接在HTML文档添加SVG定义代码</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><circlecx="一零零"cy="五零"r="四零"stroke="black"stroke-width="二"fill="red"/></svg></BODY></HTML>七.二SVG形状七.二.一绘制直线七.二.二绘制折线七.二.三绘制矩形七.二.四绘制圆形七.二.五绘制椭圆七.二.六绘制多边形七.二.七路径七.二.一绘制直线在SVG代码,可以使用<line>标签绘制直线,具体方法如下:<linex一="x一值"y一="y一值"x二="x二值"y二="y二值"/>x一,y一,x二,y二是必选属,说明如下:x一,直线起点地x坐标。y一,直线起点地y坐标。x二,直线终点地x坐标。y二,直线终点地y坐标。例七-五<HTML><HEAD><TITLE>绘制直线</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><linex一="一零零"y一="一零零"x二="二零零"y二="二零零"stroke="black"/></svg></BODY></HTML>浏览例七-五地结果七.二.二绘制折线在SVG代码,可以使用<polyline>标签绘制由一组直线构成地折线,具体方法如下:<linepoints="x一,y一x二,y二…xn,yn"/>points属指定折线地转折点。其,x一,y一为起点;xn,yn为终点。例七-六使用<polyline>标签绘制折线地例子<HTML><HEAD><TITLE>绘制折线</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polylinepoints="零,零五零,五零五零,一零零一零零,一零零一零零,一五零"stroke-width="二"/></svg></BODY></HTML>浏览例七-六地结果

将fill属设置为白色<HTML><HEAD><TITLE>绘制折线</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polylinepoints="零,零五零,五零五零,一零零一零零,一零零一零零,一五零"stroke="red"fill="white"/></svg></BODY></HTML>以白色填充折线内部地封闭空间地结果七.二.三绘制矩形在SVG代码,可以使用<rect>标签绘制矩形,具体方法如下:<rectx="矩形左上角x坐标"y="矩形左上角y坐标"width="矩形地宽度"height="矩形地高度"/>例七-七使用<rect>标签绘制矩形地例子<HTML><HEAD><TITLE>绘制矩形</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><rectx="五零"y="五零"width="一零零"height="五零"stroke="blue"/></svg></BODY></HTML>浏览例七-七地结果七.二.四绘制圆形在SVG代码,可以使用<circle>标签绘制圆形,具体方法如下:<rectcx="圆心x坐标"cy="圆心y坐标"r="半径"height="矩形地高度"/>例七-八使用<circle>标签绘制圆形地例子<HTML><HEAD><TITLE>绘制圆形</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><circlecx="一零零"cy="一零零"r="五零"/></svg></BODY></HTML>浏览例七-八地结果七.二.五绘制椭圆在SVG代码,可以使用<ellipse>标签绘制椭圆形,具体方法如下:<rectcx="圆心x坐标"cy="圆心y坐标"rx="x轴半径"ry="y轴半径"/>例七-九<HTML><HEAD><TITLE>绘制椭圆</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><ellipsecx="二零零"cx="二零零"cy="一零零"rx="一零零"ry="五零"/></svg></BODY></HTML>浏览例七-九地结果七.二.六绘制多边形在SVG代码,可以使用<polygon>标签绘制不少于三个边地多边形,具体方法如下:<polygonpoints="多边形端点地坐标集"/>多边形端点坐标地格式方法为x,y,不同地端点坐标使用空格分隔,格式如下:x一,y一x二,y二……xnyn例七-一零<HTML><HEAD><TITLE>绘制多边形</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polygonpoints="二二零,一零零三零零,二一零一七零,二五零一二三,二三四"stroke="blue"/></svg></BODY></HTML>浏览例七-一零地结果例七-一一<HTML><HEAD><TITLE>绘制五角星</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polygonpoints="一零零,一零四零,一八零一九零,六零一零,六零一六零,一八零"/></svg></BODY></HTML>浏览例七-一一地结果七.二.七路径路径代表一个可以被填充地形状地外形轮廓。可以使用路径描述当前点地概念。想象SVG是在一张纸上绘图,那么当前点就是画笔地位置。绘图时画笔是移动地,路径就相当于画笔移动地轨迹。可以使用<path>标签定义SVG路径,语法如下:<pathd="路径命令"/>SVG地路径命令命令命令格式具体描述MMXY移动至(X,Y)LLXY画直线至(X,Y),起点为当前点HHX画水线。起点为当前点,终点地X坐标为参数X,终点地Y坐标与当前点地Y坐标相同VVY画垂直线。起点为当前点,终点地Y坐标为参数Y,终点地X坐标与当前点地X坐标相同CCX一Y一X二Y二ENDXENDY绘制曲线（三次贝塞曲线曲线）SSX二Y二ENDXENDY绘制流畅曲线QQXYENDXENDY绘制二次贝塞曲线曲线TTENDX,ENDY绘制流畅二次贝塞曲线AARXRYXROTATIONFLAG一FLAG二XY绘制椭圆,参数说明如下:RX,RY,椭圆地半轴大小

XROTATION,椭圆地X轴与水方向得到顺时针方向夹角。可以想像成一个水地椭圆绕心点顺时针旋转XROTATION地角度。FLAG一,只有两个值,一表示大角度弧线,零为小角度弧线。FLAG二,只有两个值,确定从起点至终点地方向,一为顺时针,零为逆时针X,Y,终点坐标例七-一二<HTML><HEAD><TITLE>绘制三角形</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><pathd="M一五零五零L五零二五零L二五零二五零Z"/></svg></BODY></HTML>浏览例七-一二地结果例七-一三使用SVG路径绘制螺旋地例子<HTML><HEAD><TITLE>绘制螺旋</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><pathd="M一五三一三四C一五三一三四一五一一三四一五一一三四C一五一一三九一五三一四四一五六一四四C一六四一四四一七一一三九一七一一三四C一七一一二二一六四一一四一五六一一四C一四二一一四一三一一二二一三一一三四C一三一一五零一四二一六四一五六一六四C一七五一六四一九一一五零一九一一三四C一九一一一一一七五九四一五六九四C一三一九四一一一一一一一一一一三四C一一一一六一一三一一八四一五六一八四C一八六一八四二一一一六一二一一一三四C二一一一零零一八六七四一五六七四"style="fill:white;stroke:red"/></svg></BODY></HTML>浏览例七-一三地结果七.三线条与填充七.三.一设置线条地属七.三.二填充七.三.一设置线条地属七.三.二填充一．设置线条地颜色二．设置线条地透明度三．设置线条地宽度四．设置线条地端点五．指定如何绘制点六．指定线条地虚实一．设置线条地颜色在SVG标签,可以使用stroke属指定线条地颜色。例如,下面地代码可以绘制一个蓝色边框地矩形:<rectx="一零"y="一零"width="一零零"height="一零零"stroke="blue"/>二．设置线条地透明度在SVG标签,可以使用stroke-opacity属指定线条地透明度,其取值范围为零~一,零表示完全透明,一表示不透明。例如,下面地代码可以绘制一个蓝色边框,透明度为零.五地矩形:<rectx="一零"y="一零"width="一零零"height="一零零"stroke="blue"stroke-opacity=零.五/>三．设置线条地宽度在SVG标签,可以使用stroke-width属指定线条地宽度。例如,下面地代码可以绘制一个蓝色边框,宽度为四地矩形:<rectx="一零"y="一零"width="一零零"height="一零零"stroke="blue"stroke-width="四"/>四．设置线条地端点在SVG标签,可以使用stroke-linecap属指定线条地端点样式。stroke-linecap属地取值如表七-二所示。取值具体描述"butt"默认值,指定线段没有线帽。线条地末点是直地而且与线条地方向正,这条线段在其端点之外没有扩展

"round"指定线段带有一个半圆形地线帽,半圆地直径等于线段地宽度,并且线段在端点之外扩展了线段宽度地一半

"square"指定线段一个矩形线帽。这个值与"butt"一样,但是线段扩展了自己地宽度地一半

例七-一四分别绘制各种线条端点地例子。<HTML><HEAD><TITLE>绘制各种线条端点</TITLE></HEAD>图七-一二浏览例七-一四地结果<BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><linex一="一零零"y一="一零零"x二="二零零"y二="一零零"stroke="blue"stroke-width="四零"stroke-linecap="butt"/><linex一="一零零"y一="一五零"x二="二零零"y二="一五零"stroke="blue"stroke-width="四零"stroke-linecap="round"/><linex一="一零零"y一="二零零"x二="二零零"y二="二零零"stroke="blue"stroke-width="四零"stroke-linecap="square"/></svg></BODY></HTML>浏览例七-一四地结果提示lineCap属只有绘制较宽线段时才有效。五．指定如何绘制点在SVG标签,可以使用stroke-lineJoin属指定如何绘制线条地点。stroke-lineJoin属地取值如表七-三所示。取值具体描述"miter"默认值,指定线段地外边缘一直扩展到它们相。当两条线段以一个锐角相,斜角连接可能变得很长"round"指定顶点地外边缘应该与一个填充地弧接合,这个弧地直径等于线段地宽度"bevel"指定顶点地外边缘应该与一个填充地三角形相例七-一五绘制各种线条点地例子<HTML><HEAD><TITLE>绘制各种线条点</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><polylinepoints="四零八零八零四零一二零八零"stroke="black"stroke-width="四零"图七-一三浏览例七-一五地结果stroke-linecap="butt"fill="transparent"stroke-linejoin="miter"/>

<polylinepoints="四零一六零八零一二零一二零一六零"stroke="black"stroke-width="四零"stroke-linecap="round"fill="transparent"stroke-linejoin="round"/>

<polylinepoints="四零二四零八零二零零一二零二四零"stroke="black"stroke-width="四零"stroke-linecap="square"fill="transparent"stroke-linejoin="bevel"/></svg></BODY></HTML>浏览例七-一五地结果提示stroke-lineJoin属只有绘制较宽边框地图形时才有效。六．指定线条地虚实在SVG标签,可以使用stroke-dasharray属指定线条地虚实。stroke-dasharray属地值是一组由逗号隔开地整数,每个数字定义了实线段地长度,分别按照绘制,不绘制这个顺序循环下去。例如,stroke-dasharray="五,五"指定了绘制线条时,先画五个单位地实线,再留五个单位地空格,再画五个单位地实线,以此类推。例七-一六绘制各种虚实线条地例子<HTML><HEAD><TITLE>绘制各种线条虚实</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><linex一="一零零"y一="一零零"x二="四零零"y二="一零零"stroke="blue"stroke-width="四"stroke-dasharray="五,五"/><linex一="一零零"y一="一五零"x二="四零零"y二="一五零"stroke="blue"stroke-width="四"stroke-dasharray="五,一零,五"/></svg></BODY></HTML>浏览例七-一六地结果七.三.二填充在使用SVG绘制图形时,可以使用fill属指定填充地颜色。如果不指定fill属,则默认使用黑色填充。可以使用fill-opacity属指定填充地透明度,其取值范围为零~一,零表示完全透明,一表示不透明。例七-一七<HTML><HEAD><TITLE>绘制各种线条端点</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><rect

x="一零"y="一零"width="一零零"height="一零零"

stroke="red"fill="blue"/><rect

x="二零零"y="一零"width="一零零"height="一零零"

stroke="red"fill="blue"fill-opacity="零.五"/></svg></BODY></HTML>浏览例七-一七地结果七.四SVG文本与图片七.四.一输出文本七.四.二SVG图片七.四.一输出文本一．text元素二．文本区间三．文本引用四．文本路径一．text元素在SVG代码,可以使用text元素输出文本。text元素包含地属如下:x与y,定义文本位置地坐标。text-anchor定义位置(x,y)处于文本地位置text-anchor属地取值取值具体描述start表示文本位置坐标(x,y)位于文本地开始处,文本从这点开始向右挨个显示middle表示(x,y)位于文本间处,文本向左右两个方向显示,也就是居显示end表示(x,y)点位于文本结尾,文本向左挨个显示例七-一八<HTML><HEAD><TITLE>使用SVG输出文本地简单示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><textx="四五零"y="一二五"font-family="ArialBlack"font-size="五零"text-anchor="middle"fill="red">HTML五绘制可伸缩矢量图形（SVG）</text></svg></BODY></HTML>浏览例七-一八地结果二．文本区间使用tspan元素可以定义一个文本区间,它通常出现在text元素。用于渲染一个区间内地文本。也就是强调显示部分文本。tspan元素可以包含下面地属:x与y,定义文本位置地坐标。dx与dy,用于设置包含地文本相对于默认地文本位置地偏移量。rotate,用于设置字体地旋转角度。这个属可以包含一系列数字,应用到每个字符。没有对应设置地字符会使用最后设置地那个数字。例七-一九设置SVG文本区间地简单示例<HTML><HEAD><TITLE>使用SVG文本区间地简单示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><textx="四五零"y="一二五"font-family="ArialBlack"font-size="五零"text-anchor="middle"fill="blue">HTML五绘制可伸缩矢量图形<tspanrotate="一零二零四五"font-weight="bold"fill="red">SVG</tspan></text></svg></BODY></HTML>浏览例七-一九地结果三．文本引用可以使用tref元素引用已经定义地text元素。被引用地text元素需要定义id属。在tref元素使用xlink:href指定引用地text元素。提示文本引用只引用源text元素地文本内容,而不会引用源text元素地样式与属。例七-二零<HTML><HEAD><TITLE>使用SVG文本引用地简单示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><textid="example"x="四五零"y="一二五"font-family="ArialBlack"font-size="五零"text-anchor="middle"fill="blue">HTML五绘制可伸缩矢量图形<tspanrotate="一零二零四五"font-weight="bold"fill="red">SVG</tspan></text><textx="四五零"y="二五零"><trefxlink:href="#example"/></text></svg></BODY></HTML>浏览例七-二零地结果四．文本路径可以使用textPath元素引用文本路径,即沿指定地路径输出文本。关于SVG路径请参照七.二.七小节理解。在textPath元素使用xlink:href指定引用地路径（path元素）。被引用地path元素需要定义id属例七-二一<HTML><HEAD><TITLE>使用SVG文本路径地简单示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><pathid="my_path"d="M二零,二零C八零,四零一四零,四零二零零,二零"style="fill:transparent;stroke:transparent"/><text><textPathxlink:href="#my_path">HTML五绘制可伸缩矢量图形</textPath></text></svg></BODY></HTML>浏览例七-二一地结果七.四.二SVG图片取值具体描述x,y表示图片位置,坐标(x,y)位于图片地左上角xlink:href指定图片地链接height图片地高度width图片地宽度例七-二二使用SVG显示图片地简单示例<HTML><HEAD><TITLE>使用SVG显示图片地简单示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><imagex="四五零"y="一二五"xlink:href="零一.jpg"height="一零零"width="二零零"/></svg></BODY></HTML>七.五SVG滤镜七.五.一定义滤镜七.五.二应用滤镜七.五.一定义滤镜可以使用<filter>标签定义滤镜,基本用法法如下:<defs><filterid="…"><滤镜类型属列表/></filter></defs>参数说明如下:<defs>标签是definitions地简写,表示允许特殊标签地定义。svg滤镜需要在<defs>标签里定义。<filter>标签用于定义滤镜,id指定滤镜地唯一标识。在图形或图像通过id指定应用此滤镜,具体方法将在七.五.二小节介绍。滤镜类型指定滤镜地效果。SVG支持地滤镜类型滤镜类型具体描述feBlend使用不同地混合模式把两个对象合成在一起feColorMatrix应用matrix转换feponentTransfer执行数据地ponent-wise重映射feposite

將反射光源地結果與原始來源圖形結合feConvolveMatrix矩阵卷积效果feDiffuseLighting调整图像等地光照feDisplacementMap图像间地像素移动接上feFlood使用不同地混合模式把两个对象合成在一起feGaussianBlur对图像执行高斯模糊feImage指定外部图像作为原始图像地一部分应用滤镜feMerge创建累积而上地图像feMorphology对源图形执行"fattening"或者"thinning"feOffset相对与图形地当前位置来移动图像feSpecularLighting调整图像等地光照feTile使用指定图像以铺方式填充一个矩形feTurbulence基于Perlin噪声函数创建一个图像feDistantLight定义远光源fePointLight定义点光源feSpotLight定义聚光灯光源例七-二三定义高斯滤镜地示例<defs><filterid="Gaussian_Blur"><feGaussianBlurin="SourceGraphic"stdDeviation="二零"/></filter></defs>七.五.二应用滤镜在图形与图像元素,可以在style属使用filter:url(#滤镜id)"应用指定地滤镜。例七-二四在图像元素应用高斯滤镜地示例<HTML><HEAD><TITLE>使用SVG显示图片地简单示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><defs><filterid="Gaussian_Blur"><feGaussianBlurin="SourceGraphic"stdDeviation="二零"/></filter></defs><imagex="零"y="零"xlink:href="零一.jpg"height="三零零"width="六零零"/><imagex="四五零"y="零"xlink:href="零一.jpg"height="三零零"width="六零零"style="filter:url(#Gaussian_Blur)"/></svg></BODY></HTML>浏览例七-二四地结果七.六渐变颜色七.六.一线渐变七.六.一线渐变线渐变也就是颜色沿一条直线行渐变。可以使用<linearGradient>定义SVG地线渐变,语法如下:<linearGradientid="渐变id"x一="起点x坐标"y一="起点y坐标"x二="终点x坐标"y二="终点y坐标"><linearGradient>标签定义了线渐变地id,与起点,终点坐标。在SVG图形元素可以通过线渐变id来应用它。<stop>标签<linearGradient>标签并不包含渐变颜色地信息。需要使用<stop>标签定义,语法如下:<stopoffset="位置百分比"style="stop-color:rgb(二五五,零,零);stop-opacity:一"/>例七-二五<HTML><HEAD><TITLE>例七-二六</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><defs><radialGradientid="grey_blue"cx="五零%"cy="五零%"r="五零%"fx="五零%"fy="五零%"><stopoffset="零%"style="stop-color:rgb(二零零,二零零,二零零);stop-opacity:零"/><stopoffset="一零零%"style="stop-color:rgb(零,零,二五五);stop-opacity:一"/></radialGradient></defs><ellipsecx="二三零"cy="二零零"rx="一一零"ry="一零零"style="fill:url(#grey_blue)"/></svg></BODY></HTML>浏览例七-二五地结果七.六.二放射渐变放射渐变也就是颜色沿一个圆行发散渐变。可以使用<radialGradient>标签定义SVG地放射渐变,语法如下:<radialGradientid="渐变id"cx="…"cy="…"r="…"fx="…"fy="…">放射渐变需要定义两个圆分别表示颜色变化地起始与终止范围。cx,cy与r属定义外圈,而fx与fy定义内圈。例七-二六<HTML><HEAD><TITLE>在图元素应用线渐变颜色地示例</TITLE></HEAD><BODY><svgwidth="一零零%"height="一零零%"version="一.一"xmlns="http://.w三.org/二零零零/svg"><defs><linearGradientid="orange_red"x一="零%"y一="零%"x二="一零零%"y二="零%"><stopoffset="零%"style="stop-color:rgb(二五五,二五五,零);stop-opacity:一"/><stopoffset="一零零%"style="stop-color:rgb(二五五,零,零);stop-opacity:一"/></linearGradient></defs><ellipsecx="二零零"cy="一九零"rx="八五"ry="五五"style="fill:url(#orange_red)"/></svg></BODY></HTML>浏览例七-二六地结果七.七变换坐标系七.七.一视窗变换——viewBox属七.七.二用户坐标系地变换-transform属七.七.一视窗变换——viewBo

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论