h5高级html5-特性代码.pptx

SVGH5高级

什么是SVGSVG(ScalableVectorGraphics)是一种使用XML技术描述二维图形的语言SVG可以使用三种方式描述二维图形：矢量图（vectorgraphicshapes）,例如直线或曲线构成的路径。图片（images）文本（text）

SVG的优势 SVG可通过文本编译器来创建和修改。 SVG可被搜索、索引、脚本化或压缩。 SVG可在任何的分辨率下被高质量的打印。 SVG可在图像质量不下降的情况下被放大。

SVG与Canvas的区别SVG -不依赖分辨率 -支持事件处理器 -最适合带有大型渲染区域的应用程序（例如百度地图） -不适合游戏Canvas -依赖分辨率 -不支持事件处理器 -能够以“.png”或‘.jpg’格式保存结果图像 -最合适图像密集型的游戏

SVG示例绘制一个黑边蓝底的矩形：svgwidth=”100%”height=“300” rectx=”100”y=”100”width=”300”height=”100” fill=”blue”stroke=”black”stroke-width=”4”//svg -svg标签：用于嵌入SVG图像 -rect标签：用于描述该图形是一个矩形。 x和y属性：表示该矩形的左上点的坐标值。 stroke属性：表示该矩形的边框颜色。 stroke-width属性：表示该矩形的边框宽度。

SVG使用方式单独的SVG文件形式： -使用XML文件定义 !DOCTYPEsvgPUBLIC”-//W3C//DTDSVG1.1//EN”“” -指定特殊的命名空间： svgwidth=”100%”height=”100”version=”1.1” xmlns=””/svg -定义svg与在HTML方式相同

SVG使用方式（续1） 使用svg标签嵌入在HTML页面 使用embed、object和iframe等标签嵌入在HTML页面中 内嵌在XHTML页面中

SVG元素种类SVG预定义元素 矩形元素 圆形元素 椭圆元素 线条元素 折线元素 多边形元素SVG特效元素 SVG滤镜 SVG渐变

SVG矩形元素SVG使用rect标签来创建矩形，代码如下：svgwidth=”100%”height=”100” rectwidth=”300”height=”100” style=“fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)”/ /svg-rect的width和height属性：定义矩形的宽度和高度-style属性用来定义CSS属性-CSS的fill属性定义矩形的填充颜色SCC的stroke-width属性定义矩形边框的宽度-CSS的stroke属性定义矩形边框的颜色

SVG圆形元素SVG使用circle标签来创建圆形，代码如下：svgwidth=”100%”height=100 circlecx=”100”cy=”50”r=”40”stroke=”black”stroke-width=”2”fill=”red”//svg -cx和cy属性定义圆点的x和y坐标（如果省略cx和cy圆的中心会被设置为（0,0））-r属性定义圆的半径

SVG椭圆元素SVG使用ellipse标签来创建椭圆，代码如下：svgwidth=”1000”height=”500” ellipsecx=”300”cy=”150”rx=”200”ry=”80” style=”fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2” //svg-cx属性定义圆点的x坐标-cy属性定义圆点的y坐标-rx属性定义水平半径-ry属性定义垂直半径

SVG线条元素svg使用line标签来创建线条，代码如下：svgwidth=”500”height=”500” linex1=”0”y1=”0”x2=”300”y2=”300” style=”stroke:rgb(99,99,99);stroke-width:2”//svg-x1属性在x轴定义线条的开始-y1属性在y轴定义线条的开始-x2属性在x轴定义线条的结束-y2属性在y轴定义线条的结束

SVG折线元素SVG使用polyline标签来创建折线，代码如下：svgwidth=”100%”height=”100” polylinepoints=”0,00,2020,2020,4040,4040,60” style=”fill:white;stroke:red;stroke-width:2”//svg -points属性用于