html5 画图 svg,HTML5 十大新特性(五)——SVG绘图

admin管理员组

文章数量:1606464

相对于canvas绘图，SVG是一种绘制矢量图的技术。全称叫做Scalable Vector Graphics，可缩放的矢量图，在2000年就已经存在，H5把它纳入了标准标签库，并进行了一些瘦身。需要注意的是，SVG图形的属性不属于HTML DOM标准，需要用核心DOM的方法来操作；SVG的样式可以用css，但是只能用其专有的属性；如果要使用js动态生成SVG其中的元素，创建方法得用document.createElementNS('http://www.w3/2000/svg','标签名')；SVG元素的nodeName都是纯小写形式。

一、使用方法

在HTML文件中直接使用SVG相关标签()即可，默认是一个300*150的inline-block。

二、绘制不同图形(部分)

1、绘制矩形

2、绘制圆形

3、绘制椭圆

4、绘制直线

5、绘制折线

6、绘制多边形

7、绘制文本

8、绘制图像

9、特效对象——渐变特效

10、特效对象——高斯模糊滤镜

HTML5 十大新特性(四)——Canvas绘图

H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. ...

HTML5 十大新特性(二)——表单新特性

H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

HTML5 十大新特性(一)——语义标签

说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发 ...

HTML5 十大新特性(十)——Web Socket

webSocket是H5新加的一个协议,为了解决http协议的request.response一一对应和它自身的被动性,以及ajax轮询等问题.一方可以发送多条信息,连接不中断,永久连接,但也导致了服 ...

HTML5 十大新特性(七)——拖放API

拖放API是H5专门为了鼠标拖放而新提供了7个事件,可以分成三个部分来讲. 一.拖动的源对象(source)可以触发的事件 dragstart:拖动开始 drag:拖动进行中 dragend:拖动结束 ...

HTML5 十大新特性(三)——视频和音频

一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...

HTML5 十大新特性(九)——Web Storage

H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...

HTML5 十大新特性(八)——Web Worker

由于js是单线程的,所以H5添加了这个叫做webWorker的概念,允许js创建多个线程,但是子线程完全受主线程控制,且不能操作DOM,从而来处理一些比较耗时的操作. 那么如何创建一个子线程呢?通过这 ...

HTML5 十大新特性(六)——地理定位

简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务). 下面写一下它的基本调用: if(navigator.geol ...

随机推荐

Prim POJ 2031 Building a Space Station

题目传送门 题意:给出n个三维空间的球体,球体是以圆心坐标+半径来表示的,要求在球面上建桥使所有的球联通,求联通所建桥的最小长度. 分析:若两点距离大于两半径和的长度,那么距离就是两点距离 - 半径和 ...

log4j常用配置以及日志文件保存位置

log4j.rootLogger=INFO,CONSOLE log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender log4j.appender ...

转：python webdriver API 之上传文件

文件上传操作也比较常见功能之一,上传功能操作 webdriver 并没有提供对应的方法,关键上传文件的思路.上传过程一般要打开一个系统的 window 窗口,从窗口选择本地文件添加.所以,一般会卡在如 ...

服务订单SO创建

FUNCTION Z_SD_SALESORDER_CREATE. *"------------------------------------------------------------ ...

(转)通过在 Page 指令或 配置节中设置 validateRequest=false 可以禁用请求验证

通过在 Page 指令或 配置节中设置 validateRequest=false 可以禁用请求验证 说明:   请求验证过程检测到有潜在危险的客户端输入值,对请求的处理已经中止.该值可能指示危及应用 ...

可能是讲解ARM中断和中断嵌套最通俗易懂的文章

几天前一个学生问我ARM中断嵌套的问题,我才发现原来在我心中理所当然的事对学生来说理解实属不易.  ARM有七种模式,我们这里只讨论SVC.IRQ和FIQ模式.  我们可以假设ARM核心有两根中断引脚 ...

CMake set 语法

参考CMake官方文档:https://cmake/cmake/help/v3.14/command/set.html 1. 普通变量 set(

sourcetree 修改文件后提交上去，文件丢失

提交sourcetree 修改后,图片资源提交上去了,json文件没提交上去,原因是本地finder隐藏文件.gitignore_global中把一些文件类型都隐藏了不让提交. 具体使用default ...

leetCode题解寻找最短字符路径

1.题目描述 2.分析 最简单的方案,对每一个字符,向两边寻找. 3.代码 vector shortestToChar(string S, char C) { vector&lt ...

本文标签： 十大画图新特性svg