HTML5从入门到精通笔记
前端开发一起交流QQ群：740034288。
互联网创业团队兴趣QQ群：792710437。
新建《团队合伙人》贴吧：https://tieba.baidu.com/f?kw=%E5%9B%A2%E9%98%9F%E5%90%88%E4%BC%99%E4%BA%BA&fr=index。
第一章：HTML5新增语法，元素，属性，事件
1.html5语法：
1.1 html是不区分大小写，也不区分大双引号。
1.2 对于具有boolean值得属性，如disabled和readonly等，当值写属性不写值，将属性值设置为属性名或设置为空字符串时，表示为true，如<input disabled /> ，<input disabled='' />，<input disabled="disabled" />。当不写该属性时，表示未faske，如<input />。
1.3 html5简化的模板：
<!DOCTYPE html>
<meta charset="UTF-8">
<title>标题</title>2. html5元素：参考http://www.w3school.com.cn/。
2.1 语义化结构元素：只有语义，没有实际功能。
| 元素名称 | 解释 |
| header | 页面的标题 |
| footer | 页面的页脚 |
| section | 页面的内容区块 |
| article | 页面的文章文字内容部分 |
| aside | 页面左右板块 |
| nav | 页面导航板块 |
| main | 页面主题内容板块，与header，footer构成完整页面 |
2.2 功能元素：具有实际功能的元素标签。
| 元素名称 | 说明 |
| hgroup | 相当于div |
| video | 视频 |
| audio | 音频 |
| embed | 用于插入多媒体，格式包括midi，wav，aiff，au，mp3 |
| mark | 黄色高亮背景，相当于带黄色背景的span标签。如<mark>你好</mark> ,显示为 |
| dialog | 对话框或窗口，<dialog open>对话黄</dialog>显示为 |
| datalist | 下拉列表
|
| canvas | 绘图 |
| progress | 进度条 <progress value="0.7"></progress> value 范围0~1， |
| meter | 刻度尺，用于标识一个值所处范围,不可接受(红色),可以接受(黄色),非常优秀(绿色); |
2.3 表单元素：即input的type类型：email;url;number;tel;search;range;color;date;month;week.....
3. HTML5属性：
3.1 表单属性：
1).placeholder：占位符 <input type="text"placeholder="请输入用户名" />
2).autofocus：自动获取焦点 type="text"<input autofocus>;
3).multiple：允许输入框中出现多个输入(用逗号分隔); <input type="email" multiple />
4).form：用于把输入域放在FORM外部;
<form id="f4"></form>
<input type="" form="f4" />
5).required：必填项,内容不能为空 <input required>;
6).maxlength：字符中最大长度;
7).minlength：字符串最小长度;
8).max：输入框允许输入的数字最大值;
9).min：输入框允许输入的数字最小值;
10).pattern：指定必需符合正则表达式;
11).autocomplete="on/off"：表示开启或关闭，用户输入后自动保存下次在输入时呈现历史输入记录。
3.2 其他属性：
1).script的async属性：定义脚本是否异步执行。
4. HTML全局属性：即可以用户任意的html元素标签的属性。
| 全局属性 | 说明 |
| contentEditable | 该标签下所有文本内容是否可在线编辑，所有浏览器都支持。
|
| contextmenu |
鼠标右键时，列表显示菜单。目前只有firefox支持。
|
| data-* | 自定义属性名/值，所有浏览器都支持 。<div data-index="1"></div> |
| hidden | 除了IE外，都支持，标签是否隐藏 < div hidden></div> |
5. HTML5事件：
5.1 window事件： 即应用到body标签上的事件。
| 事件名称 | 说明 |
| onafterprint | body文档被打印之后触发 |
| onbeforerprint | body文档被打印之前触发 |
| onbeforeunload | body文档被卸载之前触发 |
| onoffline | 文档离线运行时触发 |
| ononkue | 文档上线运行时触发 |
| onpagehide | 窗口隐藏时触发 |
| onpageshow | 窗口显示时触发 |
| onresize | 窗口大小改变时触发 |
| onstorage | web storage区域更新后触发 |
| onundo | 文档运行undo时触发 |
| onerror | 文档运行错误时触发 |
| onhaschange | 文档改变时触发 |
| onmessage | 在消息被触发时触发 |
| onpopstate | 窗口历史记录改变时触发 |
5.2 form事件： 即应用到form标签上的事件。
| 事件名称 | 说明 |
| oncontextmenu | 当上下文菜单被触发时触发，即右键菜单显示时触发 |
| onformchange | 表单改变时触发 |
| onforminput | 表单获得用户输入时触发 |
| oninput | input元素获得用户输入时触发 |
| oninvalid | 元素无效时触发 |
5.3 mouse事件： 即鼠标事件。
| 事件名称 | 说明 |
| ondrag | 元素被拖动事件 |
| ondragend | 元素被拖动结束时事件 |
| onmousewheel | 鼠标滚轮滚动时事件 |
| onscroll | 元素滚动条滚动时事件 |
| ondragenter | 元素拖动进入有效区域时触发 |
| ondragleave | 元素拖动离开有效区域时触发 |
| ondragover | 元素在有效区域上拖动时触发 |
| ondragstart | 元素开始拖动时触发 |
| ondrop | 元素拖动松开时触发 |
5.4 media事件： 即audio,video,img,embed,object标签触发的事件。
第二章：HTML5的表单元素及属性
1.html5的input的type类型：
| input的类型 | 代码 | 说明 | |||||||||||||||||||||
| 文本框 | <input type="text"> | 可输入数字，字母等。 | |||||||||||||||||||||
| 单选框 | <input type="radio">男 | 若干种选其一 | |||||||||||||||||||||
| 复选框 | <input type="checkbox">男 | 可多选 | |||||||||||||||||||||
| 下拉列表 | <select><option>选项</option></select> | 下拉选中 | |||||||||||||||||||||
| 密码框 | <input type="password"> | ***** | |||||||||||||||||||||
| 提交按钮 | <input type="submit" > | 提交按钮 | |||||||||||||||||||||
| 点击按钮 | <input type="button" value="按钮"> | 点击按钮 | |||||||||||||||||||||
| 图片按钮 | <input type="image"> | ||||||||||||||||||||||
| 隐藏域 | <input type="hidden"> | 隐藏 | |||||||||||||||||||||
| 重复按钮 | <input type="reset"> | 清空表单所有数据 | |||||||||||||||||||||
| 文件夹 | <input type="file"> | 上传文件 | |||||||||||||||||||||
| email类型 | <input type="email"> |
验证输入框是否包括@ |
|||||||||||||||||||||
| url类型 | <input type="url"> | 验证是否是有效网址 | |||||||||||||||||||||
| number类型 | <input type="number"> | 验证是否是数字，常与max,min,value,step连用 | |||||||||||||||||||||
| range类型 | <input type="range" max="20" min="10" value="15"/> | 滑块， |
|||||||||||||||||||||
| sea类型eix | <input type="search" /> | firefox不支持，搜索，自动可清空的x， |
|||||||||||||||||||||
| tel类型 | <input type="tel" /> | ||||||||||||||||||||||
| color类型 | <input type="color" /> | ||||||||||||||||||||||
| 日期时间类型 |
|
||||||||||||||||||||||
2.html5的input的属性：
| 属性 | 代码 | 数码 |
| autocomplete | <input type="text" autocomplete="on"> | 下次输入相同内容，浏览器是否自动完成输入内容 |
| autofocus | <input type="text" autofocus="autofocus"> | 是否自动获得焦点 |
第三章：HTML5绘图
1. 绘制图形的基本步骤：目前只有IE7及以下的IE浏览器不支持canvas。
1.1 定义canvas标签的id值：canvas默认是300*150的宽高。
<canvas id="mycanvas" width="200" height="100">您的浏览器不支持canvas，请更换浏览器！</canvas>1.2 js通过canvas的id获取canvas标签对象：
var canvas=document.getElementById("mycanvas")1.3 js获取2d或者3d画笔：
var ctx=canvas.getContext("2d")1.4 绘制图形：
1.4.1 绘制路径：如直线或圆，三角形等。
ctx.beginPath(); //开始一条新路径 。
ctx.closePath(); //闭合当前路径。即当前路径到开始路径的连线。
ctx.moveTo(x,y); //光标移到指定的起点。
ctx.lineTo(x,y); //从指定起点到当前点画一条直线。然后光标也开始移动到此。
ctx.arc(cx,cy,r,start,end,wise); //绘制圆拱路径。Start/end=n*Math.PI/180，弧度表示。
//cx,cy 圆心坐标。r，半径。start，开始角度（弧度）。end，结束角度（弧度）。
//wise，可选参数，true为逆时针,false为顺时针，默认true。start=0,end=Math.PI*2时，是绘制圆形图形。
ctx.arcTo(x1,y1,x2,y2,r); //绘制曲线，表示起点/终点位置和弧半径r；
ctx.fill(); //填充。
ctx.stroke(); //描边。案例：绘制复制的路径图形如下：
<body >
<canvas id="mycanvas" width="300" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
ctx.beginPath()
ctx.fillStyle="rgb(100,255,100)"
ctx.strokeStyle="rgb(0,0,100)"
var x=Math.sin(0)
var y=Math.cos(0)
var dig=Math.PI/15*11
for(var i=0;i<30;i++){
var x=Math.sin(i*dig)
var y=Math.cos(i*dig)
ctx.lineTo(150+x*100,150+y*100)
}
ctx.closePath()
ctx.fill()
ctx.stroke()
</script>1.4.2 绘制矩形：
ctx.lineWidth = 1 //边框宽度(描边宽度)。
ctx.fillStyle = "#f00" //填充样式。
ctx.strokeStyle="#fff"; //描边样式(边框颜色) 。
ctx.fillRect(x,y,w,h) //填充一个矩形。x,y为矩形的左上角开始的相对于画布canvas左上角的坐标。
ctx.strokeRect(x,y,w,h) //描边一个矩形。
ctx.clearRect(x,y,w,h); //清除一个矩形范围内所有元素。1.4.3 绘制曲线：
（1）简单曲线：ctx.arcTo(x1,y1,x2,y2,r)。曲线起点x1,y1坐标，终点x2,y2坐标。
<body >
<canvas id="mycanvas" width="300" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
ctx.beginPath()
ctx.moveTo(20,20)
ctx.lineTo(20,20)
ctx.arcTo(150,20,150,70,50)
ctx.lineTo(150,120)
ctx.stroke()
</script>（2）贝塞尔二次方曲线：ctx.quadraticCurveTo(cpx,cpy,x,y)。控制点坐标(cpx,cpy)，终点坐标(x,y)。
ctx.beginPath()
ctx.moveTo(20,20) //确定开始点
ctx.quadraticCurveTo(20,100,20,170) //定义控制点
ctx.quadraticCurveTo(20,100,200,20) //定义结束点
ctx.stroke() //描边（3）贝塞尔三次方曲线：ctx.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)。控制点1坐标(cpx1,cpy1)，控制点2坐标(cpx2,cpy2)，终点坐标(x,y)。
ctx.beginPath()
ctx.moveTo(20,20) //确定开始点
ctx.bezierCurveTo(20,100,20,170) //定义控制点1
ctx.bezierCurveTo(20,100,200,20) //定义控制点2
ctx.bezierCurveTo(20,100,200,20) //定义结束点
ctx.stroke() //描边1.4.4 设置图形样式：
1.4.4.1 设置线型：包括线型的粗细，端点样式，两线段连接处样式，线型交点。
ctx.lineWidth=1：设置线宽为1，默认值为1。
ctx.lineCap=butt：设置端点样式，包括butt,round,square。默认为butt。
ctx.lineJoin=round：设置两条线段连接处的样式，包括round,bevel,miter。
ctx.miterLimit=10：设置两线段连接处交点的绘制方式，默认是10.
1.4.4.2 绘制线型渐变：ctx.createLinearGradient(x0,y0,x1,y1).addColorStop(stop,color)，渐变开始坐标（x0,y0），结束坐标（x1,y1）。stop是0-1之间的位置值，color是接收位置显示的颜色。案例如下：
<body >
<canvas id="mycanvas" width="300" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
var line=ctx.createLinearGradient(0,0,0,200)
line.addColorStop(0,"#ff0000")
line.addColorStop(1/3,"#ffff00")
line.addColorStop(2/3,"#0000ff")
line.addColorStop(1,"#ff0000")
ctx.fillStyle=line
ctx.strokeStyle=line
ctx.fillRect(10,10,200,200)
</script>1.4.4.3 绘制径向渐变：ctx.createRadialGradient(x0,y0,r0,x1,y1,r1).addColorStop(stop,color)。开始圆的坐标(x0,y0)，半径r0,。结束圆的坐标(x1,y1)，半径r1。stop是0-1之间的位置值，color是接收位置显示的颜色。案例如下：
<body >
<canvas id="mycanvas" width="300" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
var line=ctx.createRadialGradient(55,55,20,100,100,90)
line.addColorStop(0,"#ff0000")
line.addColorStop(1/3,"#ffff00")
line.addColorStop(2/3,"#0000ff")
line.addColorStop(1,"#ff0000")
ctx.fillStyle=line
ctx.fillRect(10,10,200,200)
</script>1.4.4.4 绘制图案：ctx.createPattern(image,r)。image表示可绘制的图片，画布或视频元素。r表示重复的方向，包括repeat(水平和垂直方向都重复)，repeat-x、repeat-y、no-repeat（不重复）。案例如下：
<body >
<canvas id="mycanvas" width="300" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
var img=new Image()
img.src="2.png"
img.onload=function(){
var parn=ctx.createPattern(img,'no-repeat')
ctx.fillStyle=parn
ctx.fillRect(0,0,600,600)
}
</script>1.4.4.5 设置不透明度：ctx.rgba(R,G,B,A)。案例如下：
<body >
<canvas id="mycanvas" width="300" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
ctx.translate(200,20)
for(var i=1;i<50;i++){
ctx.save()
ctx.transform(0.95,0,0,0.95,30,30)
ctx.rotate(Math.PI/12)
ctx.beginPath()
ctx.fillStyle='rgba(255,0,0,'+(1-(i+10)/40)+')'
ctx.arc(0,0,50,0,Math.PI*2,true)
ctx.fill()
}
</script>1.4.4.6 设置阴影：案例如下：
<body >
<canvas id="mycanvas" width="300" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
ctx.shadowOffsetX=13 //阴影x偏移
ctx.shadowOffsetY=3 //阴影Y偏移
ctx.shadowBlur=2 //阴影大小
ctx.shadowColor='rgba(0,0,0,0.9)' //阴影颜色
ctx.fillStyle="#33ccff"
ctx.fillRect(20,20,300,60)
ctx.fill()
ctx.font="45px 黑体"
ctx.fillStyle="white"
ctx.fillText("HTML5",30,64)
</script>1.4.5 操作图形：
1.4.5.1 保存和恢复canvas状态：ctx.save()保存当前状态。ctx.restore()从上一个保存状态中再次取出。
1.4.5.2 清除画布：ctx.clearReact(x,y,w,h)清除以(x,y为坐标)，宽高为w和h的矩形画布。
1.4.5.3 移动画笔：ctx.translate(x,y) 将画布移动到(x,y)坐标处。案例如下：
<body >
<canvas id="mycanvas" width="700" height="200">不支持canvas</canvas>
</body>
<script type="text/javascript">
function drawTop(ctx,fillStyle){ //绘制伞的顶部
ctx.fillStyle=fillStyle
ctx.beginPath()
ctx.arc(0,0,30,0,Math.PI,true)
ctx.closePath()
ctx.fill()
}
function drawBottom(ctx){ //绘制伞底部把手
ctx.save()
ctx.fillStyle="blue"
ctx.fillRect(-1.5,0,1.5,40)
ctx.beginPath()
ctx.strokeStyle="blue"
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true)
ctx.stroke()
ctx.closePath()
ctx.restore()
}
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
ctx.translate(80,80)
for(var i=1;i<10;i++){
ctx.save()
ctx.translate(60*i,0)
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)")
drawBottom(ctx)
ctx.restore()
}
</script>1.4.5.4 旋转画笔：ctx.rotate(angle) 将画布旋转angle度。案例如下：
<body >
<canvas id="mycanvas" width="400" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
function drawTop(ctx,fillStyle){ //绘制伞的顶部
ctx.fillStyle=fillStyle
ctx.beginPath()
ctx.arc(0,0,30,0,Math.PI,true)
ctx.closePath()
ctx.fill()
}
function drawBottom(ctx){ //绘制伞底部把手
ctx.save()
ctx.fillStyle="blue"
ctx.fillRect(-1.5,0,1.5,40)
ctx.beginPath()
ctx.strokeStyle="blue"
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true)
ctx.stroke()
ctx.closePath()
ctx.restore()
}
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
ctx.translate(80,80)
for(var i=1;i<10;i++){
ctx.save()
ctx.rotate(Math.PI*(2/4+i/4))
ctx.translate(0,-100)
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)")
drawBottom(ctx)
ctx.restore()
}
</script>1.4.5.5 缩放图形：ctx.scale(x,y) 将画布x轴缩放x，y轴缩放y。案例如下：
<body >
<canvas id="mycanvas" width="400" height="300">不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas= document.getElementById("mycanvas")
var ctx=canvas.getContext("2d")
ctx.translate(200,20)
for(var i=1;i<80;i++){
ctx.save()
ctx.translate(30,30)
ctx.scale(0.95,0.95)
ctx.rotate(Math.PI/12)
ctx.beginPath()
ctx.fillStyle="red"
ctx.globalAlpha="0.4"
ctx.arc(0,0,50,0,Math.PI*2,true)
ctx.closePath()
ctx.fill()
}
</script>1.4.5.6 变换矩阵：ctx.transform(a,b,c,d,e,f)，即缩放，移动，旋转，倾斜。 a表示水平缩放比例，b表示水平倾斜，c表示垂直倾斜，d表示垂直缩放，e表示水平移动,f表示垂直移动。如cxt.transfomr(0.95,0,0,0.95,30,30)。
1.4.5.7 组合图形：ctx.globalCompositeOperation="source-over"，当2个或以上图形存在重叠区域时，重叠区域的样式，
1.4.5.8 裁切路径：ctx.clip()，从原始画布上裁切任意形状和尺寸。没有被裁切的部位会被隐藏。
1.4.6 绘制文本：
ctx.textBaseline = top/hanging/middle/alphabetic/ideographic/bottom; // 基线。即垂直方向上中下对齐方式
ctx.font = "12px sans-serif"; //文本大小与字体。
ctx.textAlign=start/center/end/left/right; //文字的对齐方式。
ctx.fillText(str,x,y[,maxWidth]); //填充文本(实心)。x,y表示开始坐标和最大文本宽度px计算。
ctx.strokeText(str,x,y[,maxWidth]); //空心文本。默认黑色字体。
ctx.measureText(str); //返回文本宽度,方法返回对象如{width:200}。1.4.7 绘制图像： Canvas属于客户端技术，图片在服务器中，所以浏览器载图片，等待图片下载完成，则绘制图像。可以通过页面图像id获得图像元素，也可用new Image新建一个图像元素。
var img = new Image(); //创建图片对象。
img.src = "img/p3.png"; //发送异步请求下载图片。
img.onload = function(){ //图片下载完成(加载)。
ctx.drawImage(img,x,y); //绘制原始大小图片，x,y为启动绘制坐标。
ctx.drawImage(img,x,y,w,h);//绘制拉伸图片。W.h为绘制的图像的宽高。
ctx.drawImage(img,sx,sy,swidth,sheight,x,y[,width,height]); //sx,sy表示开始剪切图片的开始位置，swidth,sheight表示被剪切图像的宽高，x,y表示图像在画布的坐标位置，widht,height表示画出来的原图像的宽高，可对原图宽高拉伸。
ctx.createPattern(image,type);//表示图片的平铺方式，type的取值有 repeat,no-repeat,repeat-x,repeat-y;
};1.4.8 path2D对象：
//绘制一个圆
var circle=new Path2D(); //创建一个空Path2D对象，var circle=new Path2D(path)复制一个Path2D对象。
circle.arc(50,50,50,0,2*Math,PI)
ctx.stroke(circle)
第四章：SVG
1. svg定义：在网页中绘制复杂的图形。位图——由像素组成，一个点就是一个像素，识别颜色较多，放大到一定程度时，会失真。矢量图——以线和色块为主，识别颜色较少 。任意放大不会失真。svg的应用兴趣图谱：
2. HTML中使用svg：svg是基于xml的技术。
2.1 img标签引入1.svg文件：<img src="1.svg"/>。
2.2 div标签引入1.svg文件：<div style="background:url(1.svg) no-repeat;width:200px;height:200px"></div>
2.3 iframe标签引入1.svg文件：<iframe src="1.svg"></iframe>
2.4 HTML中直接嵌入svg代码：
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
<!--绘制圆心坐标（100,50），半径40的红色圆-->
<circle cx="100" cy="50" r="40" fill="red"></circle>
</svg>
</body>
</html>
2.5 链接到1.svg文件：<a href="1.svg"></a>
3. svg中的基本图形：矩形，圆形，椭圆，多边形，直线，折线，路径，文本，线框样式，svg滤镜，模糊效果，阴影效果。线型渐变，径向渐变，图片。<g></g>标签可以包裹以上的图形，并设置共同属性样式。
3.1 圆形：
<!--圆心坐标（cx,cy），半径40，stroke描边颜色，fill填充颜色，stroke-width边宽-->
<circle cx="100" cy="50" r="40" fill="red" stroke="black" stroke-width="2"></circle>
<circle cx="100" cy="50" r="40" style="fill:red; stroke:black; stroke-width:2;cursor:pointer"></circle>3.2 矩形：
<!--rx,ry是矩形倒角，只写rx/ry一个值时表示，rx=ry,（x,y）表示矩形左上角的坐标-->
<rect width="300" height="100" style="fill:red;stroke: black;stroke-width: 5;" rx='10' ry='10' x="20" y="20"></rect>3.3 椭圆：
<!--椭圆x坐标cx，y坐标cy，x轴半径rx，y轴半径ry-->
<ellipse cx="150" cy="80" rx="100" ry="50" style="fill:red;stroke:purple;stroke-width:2 ;"></ellipse>3.4 多边形：
<!--多边形points，多边形的点，点的总数必须是偶数-->
<polygon points="200,10 250,190 160,210" style="fill:red;stroke: purple;stroke-width: 2;"></polygon>3.5 直线：
<!--直线：起始点坐标(x1,y1)，终点坐标(x2,y2)-->
<line x1="10" y1="20" x2="50" y2="100" style="stroke: purple;stroke-width: 2;"></line>3.6 折线：
<!--折线：points是折线上的点-->
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke: purple;stroke-width: 2;"></polyline>3.7 路径：
<!--路径：-->
<path d="M150 0L75 200 L225 200 Z"></path>3.8 文本：
<!--文本：初始点坐标(x,y)-->
<text x="0" y="15" fill="red" transform="rotate(30 20,40)" font-size="20" text-anchor="middle">
第一行文本
<tspan x="10" y="45">第二行文本</tspan>
</text>3.9 线框样式：即图形的属性。
3.9.1 stroke：描边颜色。
3.9.2 stroke-width：描边边宽。
3.9.3 stroke-linecap：线段或路径断点样式 。包括butt（平直）,round（圆形）,square（正方形）,inherit（继承）。
3.10 svg滤镜：略。
3.11 阴影效果：略。
3.12 线型渐变：略。
3.13 径向渐变：略。
3.14 图片：
<!--图片：左上角坐标(x,y),width宽和高height,xlink:href图片路径-->
<image x="10" y="20" width="50" height="50" xlink:href="1.png"></image>