对SVG的理解和h5中新增的表单元素

1.什么是svg？

说白了他就是一个和canvas一样的画图工具，只不过用法不一样，我在前面就有提到过SVG，他是一个矢量图，可以在外部写样式。

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

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

SVG 使用 XML 格式定义图形

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

SVG 是万维网联盟的标准

他并不是一个新的技术，他以前就存在，在2000年以前是在Xhtml当中的，知道2000年才被列入h5当中来。

2.svg的优势

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

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

SVG 是可伸缩的

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

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

3.svg和canvas的区别：

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

4.svg的用法：

 其实他的用法和canvas有一点不一样

我们正常写，直接给svg的宽度和高度，x轴和y轴，实心还是空心等等。

如果我们在js当中写就不是想canvas那样来写的，我们要通过var rect= document.createElementNS("http://www.w3.org/2000/svg","你要画的图形")来实现的；

rect.setAttribute("width",100);
rect.setAttribute("height",100);
rect.setAttribute("x",100);
rect.setAttribute("y",100);

这是矩形的获取方式还有：

circle：圆形

ellipse：椭圆

line 线条

polyline折线  points="x1,y1 x2,y2 x3,y3.......”

polygon多边形（和折线差不多）

 

 

 

5.我们常见的表单验证有哪些呢

 

　　text　　文本框标签

 

　　password 密码框

 

　　checkbox 多选框

 

　　radio　　单选框

 

　　button　　按钮

 

　　submit　　提交按钮

我们新增的表单控件有：search 搜索框 url 地址 tel电话号码  number 数字 color颜色  range范围  date 日期

新增表单元素：

datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

output 元素

output 元素用于不同类型的输出，比如计算或脚本输出