web前端网页H5（svg知识）.pptx

web前端开发-H5SVG绘图 主讲人：lucy01

SVG01HTML5+CSS3svg是什么 矢量图 与canvas的区别svg的引入方式方式一： ?xmlversion=1.1encoding=utf-8? !DOCTYPEsvgPUBLIC-//W3C//DTDSVG1.1//EN /Graphics/SVG/1.1/DTD/svg11.dtd svgxmlns=/2000/svg/svg方式二： 图片、背景、框架方式三: html页面中添加svg

SVG01HTML5+CSS3circle:圆形 圆心坐标cx,cy 半径r fillstrokestroke-widthstlye样式 fill=none/transparentellipse:椭圆 cx属性定义的椭圆中心的x坐标cy属性定义的椭圆中心的y坐标rx属性定义的水平半径ry属性定义的垂直半径rect:矩形 widthheight宽高 坐标x,y 圆角rx,ryline:线条 x1,y1,x2,y2 stroke-opacity透明fill-opacity

SVG01HTML5+CSS3polyline:折线 points:点坐标（x1y1x2y2...）或(x1,y1,x2,y2....)或(x1,y1x2,y2x3,y3....)polygon:多边形 折线闭合fill-rule:evenodd/nonzero;

SVG01HTML5+CSS3g标签:组合元素设置元素公共属性 共用属性 transform=translate(0,0)text标签 x,y,text-anchor(对齐startendmiddle) font-sizeimage标签 x,y,widthheight xlink:href(图片地址)

SVG01HTML5+CSS3stroke:colorstroke-width:尺寸

付出不亚于任何人的努力!持之以恒End