关键词：
相对于canvas绘图，SVG是一种绘制矢量图的技术。全称叫做Scalable Vector Graphics，可缩放的矢量图，在2000年就已经存在，H5把它纳入了标准标签库，并进行了一些瘦身。需要注意的是，SVG图形的属性不属于HTML DOM标准，需要用核心DOM的方法来操作；SVG的样式可以用css，但是只能用其专有的属性；如果要使用js动态生成SVG其中的元素，创建方法得用document.createElementNS(‘http://www.w3.org/2000/svg‘,‘标签名‘)；SVG元素的nodeName都是纯小写形式。
一、使用方法
在HTML文件中直接使用SVG相关标签(<svg></svg>)即可，默认是一个300*150的inline-block。
二、绘制不同图形(部分)
1、绘制矩形
<rect [width/height/x/y/fill/fill-opacity/stroke/stroke-width/stroke-opacity]></rect>
2、绘制圆形
<circle [r/cx/cy]></circle>
3、绘制椭圆
<ellipse [rx/ry/cx/cy]></ellipse>
4、绘制直线
<line [x1/y1/x2/y2/stroke]></line>
5、绘制折线
<polyline [points/stroke]></polyline>
6、绘制多边形
<polygen [points]></polygen>
7、绘制文本
<text [x/y/font-size/alignment-baseline/fill]></text>
8、绘制图像
<image [width/height/xlink:href]></image>
9、特效对象——渐变特效
<defs>
<linearGradient [x1/y1/x2/y2]>
<stop [offset/stop-color]></stop>
</linearGradient>
</defs>
10、特效对象——高斯模糊滤镜
<defs>
<filter>
<feGaussionBlur [stdDeviation]>
</filter>
</defs>
html5新特性
1、语义标签比如header、nav、footer、section等2、input表单增强比如date日期选择time时间选择search搜索tel电话url地址3、视频音频audiovideo4、canvas绘图5、SVG绘图6、地理位置7、拖放API比如拖放文件等8、WebSocketHTML5开始提供的一种在单个TC... 查看详情
html5_01之表单新特性
...注释当前行 Ctrl+Alt+L：格式化当前文档2、HTML5九大新特性： ①表单新特性、②视频音频、③Canvas绘图、④SVG绘图、⑤地理定位、⑥拖放API、⑦We 查看详情
canvas与svg区别
HTML5新特性之五——SVG绘图 Canvas绘图SVG绘图绘图类型位图矢量图缩放失真不失真颜色细节丰富不够丰富应用领域照片、游戏统计图、图标、地图内容JS绘制每个图形都是标签事件绑定不方便方便 ScalableVectorGraphiph，可缩放... 查看详情
html5新增特性(代码片段)
1.语义化标签2.增强型表单（1）新的表单输入类型（2）新表单元素（3）新表单属性 3.视频和音频4.Canvas绘图（图形、路径、文本、渐变、图像）5.SVG绘图（与Canvas的区别）6.地理定位7.拖放API8.WebWorker完整的WebWorker实例9.WebStorag... 查看详情
html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性，只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录对于初接触的人来说是一个导向对于已经接触过的人来说是一个检测你掌握程度的检测html5新特性综述：1... 查看详情
html5新特性--svg-echarts(重点)-拖动api-webworker
一、html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polylinepoints="50,5070,5560,66"stroke=""stroke-width=""> </polyline> #points一组坐标点 # 查看详情
html5都有哪些新特性
参考技术AHTML5对比传统HTML有很多的新特性，包括了1、语义化标签：对比之前HTML没有体现结构语义化的标签，如：<divid="header"></div>，HTML5提供语义化标签，如：<header><article><footer><nav><aside>&... 查看详情
html新特性--canvas绘图-文本
一、html5新特性--canvas绘图-文本(重点)#常用方法与属性 -ctx.strokeText(str,x,y); 绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文本基线为准) -ctx.fillText(str,x,y); 查看详情
html5基本新特性总概
...HTML，将成为html、xhtml以及HTMLDOM的新标准。参考：HTML5的十大新特性前端面试必备之html5的新特性HTML51.语义化元素1.1结构元素标签描述article表示与上下文不相关的独立内容区域aside定义页面的侧边栏区域header定义页面头部区域hgrou... 查看详情
html55
复习：HTML5新特性1.新的语义标签2.表单2.03.视频和音频4.Canvas绘图5.SVG绘图6.地理定位7.拖放API8.WebWorker9.WebStorage10.WebSocket SVG的使用：<svgwidth=""height=""> 绘制矩形 <rectwidth=""height=""x=""y=""></rec 查看详情
温故知新——html5重要知识点复习
...里用来温故知新的，并非本人原创。 一、HTML5新特性 ——十个新特性：凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6 查看详情
html5新特性新增功能
...torage;语义化元素；表单控件等等新增的功能，都是HTML5新特性。下面列举HTML5新特性详细说明：一.新的文档类型 (NewDoctype)目前许多网页还在使用XHTML1.0并且要在第一行像这样声明文档类型： 查看详情
html54
复习：HTML5新特性：1.新的语义标签和属性2.表单2.03.视频和音频4.Canvas绘图5.SVG绘图6.地理定位7.拖放API8.WebWorker9.WebStorage10.WebSocket Canvas绘图使用方法：<canvasid="c"width=""height=""></canvas>varctx=c.getContext(‘ 查看详情
html5都有哪些新特性，移除了那些元素？如何处理html5新标签的浏览器兼容问题？
h5新特性：语义化标签：<hrader></header>、<footer></footer>、<nav></nav>、<section></section>、<article></article>、<aside></aside>、<video></video>、<audio></audio>新增表单元素：em... 查看详情
java8十大新特性
java8十大新特性如下:1.接口的默认方法2.Lambda表达式3.函数式接口4.方法与构造函数引用5.Lambda作用域6.访问局部变量7.访问对象字段与静态变量8.访问接口的默认方法9.DateAPI10.Annotation注解一、接口的默认方法Java8允许我们给接口添... 查看详情
html53
复习：HTML5新特性：(1)新的语义标签和属性(2)表单2.0(3)视频和音频 <videosrc=""autoplayloopcontrolsmutedposterpreload="auto"> <audiosrc="">(4)Canvas绘图——重点(5)SVG绘图(6)地理定位(7)拖放API(8)WebWorker(9)WebStorage(1 查看详情
java8十大新特性详解(代码片段)
前言： Java 8已经发布很久了，很多报道表明Java 8是一次重大的版本升级。在JavaCodeGeeks上已经有很多介绍Java8新特性的文章，例如PlayingwithJava8–LambdasandConcurrency、Java8DateTimeAPITutorial:LocalDateTime和AbstractClassVersusInterfacein 查看详情
html5_04之svg绘图
1、关于Canvas绘制图像： 问题：需要绘制多张图片时，必须等待所有图片加载完成才能开始绘制；而每张图片都是异步请求，彼此没有先后顺序，哪一张先加载完成完全无法预测； 方案： varprogress=0;//全局加载进度&nbs... 查看详情