HTML5内联SVG教程以及与Canvas的区别_H5之家 - 中国HTML5教程资源分享第一站

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

SVG优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。

把 SVG 直接嵌入 HTML 页面

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

实例

<!DOCTYPE html> <html> <body> <svg xmlns="" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>

结果：

抱歉, 你的浏览器不支持内联SVG.

学习更多关于 SVG 教程, 请访问 SVG 教程.

SVG 与

以上就是HTML5内联SVG教程以及与Canvas的区别的详细内容，更多请关注php中文网其它相关文章！

这篇文章主要介绍了HTML5之pushstate、popstate操作history,无刷新改变当前url的相关资料,需要的朋友可以参考下

一、认识window.history

window.history表示window对象的历史记录，是由用户主动产生，并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退。

1、历史记录的前进和后退

在历史记录中后退，可以这么做：

window.history.back();

这就像用户点击浏览器的后退按钮一样。

类似的，你可以前进，就像在浏览器中点击前进按钮，像这样：

window.history.forward();

2、移动到指定历史记录点

通过指定一个相对于当前页面位置的数值，你可以使用go()方法从当前会话的历史记录中加载页面（当前页面位置索引值为0，上一页就是-1，下一页为1）。

要后退一页（相当于调用back()）：

window.history.go(-1);

向前移动一页（相当于调用forward()）：

window.history.go(1);

类似的，传递参数“2”，你就可以向前移动2个记录点。你可以查看length属性值，了解历史记录栈中一共有多少个记录点：

window.history.length;

二、修改历史记录点

HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点，下面逐一简要说明一下。

1、存储当前历史记录点

存储的方式类似于数组的入栈（Array.push()），在window.history里新增一个历史记录点，例如：

// 当前的url为： var json={time:new Date().getTime()}; // @状态对象：记录历史记录点的额外对象，可以为空 // @页面标题：目前所有浏览器都不支持 // @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域 window.history.pushState(json,"","");

执行了pushState方法后，页面的url地址为qianduanblog.com/post-1.html。

2、替换当前历史记录点

window.history.replaceState和window.history.pushState类似，不同之处在于replaceState不会在window.history里新增历史记录点，其效果类似于window.location.replace(url)，都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。

3、监听历史记录点

监听历史记录点，直观的可认为是监听URL的变化，但会忽略URL的hash部分，监听URL的hash部分，HTML5有新的API为onhashchange，我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化，并且可以获取存储在该历史记录点的状态对象，也就是上文说到的json对象，如：

// 当前的url为： window.onpopstate=function() { // 获得存储在该历史记录点的json对象 var json=window.history.state; // 点击一次回退到： // 获得的json为null // 再点击一次前进到： // 获得json为{time:1369647895656} }

值得注意的是：javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate

通过上面的信息我们发现只有h264编码的MP4视频（MPEG-LA公司）、VP8编码的webm格式的视频（Google公司）和Theora编码的ogg格式的视频（iTouch开发）可以支持html5的<video>标签。

解决方法

video标签允许多个source元素，source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式，这样可用来解决浏览器兼容问题。

<video controls="controls" width="100%"> <source src="1.mp4" type="video/mp4"> <source src="1.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

总结

以上就是video标签无法播放mp4问题在html5中的解决办法的详细内容，更多请关注php中文网其它相关文章！

过程对象：

目标对象：

drop：源对象被拖放到目标对象内。

<p id="source" draggable="true">a元素</p> <p id="process">b元素</p> <p id="target">c元素</p> <script> var source = document.getElementById('source'), // a元素 process = document.getElementById('process'), // b元素 target = document.getElementById('target'); // c元素 source.addEventListener('dragstart',function(ev){ // dragstart事件由a元素产生 console.log('a元素开始被拖动'); },false) process.addEventListener('dragenter',function(ev){ // dragenter事件由b元素产生 console.log('a元素开始进入b元素'); },false) process.addEventListener('dragleave',function(ev){ // dragleave事件由b元素产生 console.log('a元素离开b元素'); },false) target.addEventListener('drop',function(ev){ // drop事件由c元素产生 console.log('a元素拖放到c元素了'); ev.preventDefault(); },false) document.ondragover = function(e){e.preventDefault();} </script>

dataTransfer 对象

在所有拖放事件中提供了一个数据传递对象 dataTransfer，用于在源对象和目标对象间传递数据。接下来认识一下这个对象的方法和属性，来了解它是如何传递数据的。

setData()

该方法向 dataTransfer 对象中存入数据。接收两个参数，第一个表示要存入数据种类的字符串，现在支持有以下几种：

第二个参数为要存入的数据。例如：

event.dataTransfer.setData('text/plain','Hello World');

getData()

该方法从 dataTransfer 对象中读取数据。参数为在 setData 中指定的数据种类。例如：

event.dataTransfer.getData('text/plain');

clearData()

该方法清除 dataTransfer 对象中存放的数据。参数可选，为数据种类。若参数为空，则清空所有种类的数据。例如：

event.dataTransfer.clearData();

setDragImage()