相对于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 十大新特性(五)——SVG绘图的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. PHPExcel--基本操作

    下面是PHPExcel的导入与导出的基本操作,也是最重要的两个操作. 生成文件: <?php require_once './Classes/PHPExcel.php'; $content = ...

  2. 调优SQL思路

    --调优SQL --sqlreview ->logshipping -> ag辅助副本 --查看正确的执行计划 打开实际的执行计划set statistics io on --查看错误的执 ...

  3. 【实践】js 如何实现动态添加文本节点

    对于我这个js 小白来说 今天鼓起勇气做起了邮箱认证这个特效 但是这次不是想说如何实现这这个特效而是想记录一下特效当中的某个部分 那就是向元素节点动态添加文本节点 百度了一下动态添加文本节点的方式 是 ...

  4. JAVA面试中问及HIBERNATE与 MYBATIS的对比,在这里做一下总结

    我是一名java开发人员,hibernate以及mybatis都有过学习,在java面试中也被提及问道过,在项目实践中也应用过,现在对hibernate和mybatis做一下对比,便于大家更好的理解和 ...

  5. C语言 02 include

    stdio.h  h表示header file include"text.txt" 自己写的文件用双引号,系统自带文件用<>. 绝对路径用 / ,相对路径不带/

  6. .net(C#)中结构和类的区别

    static void Main(string[] args) { //类型 //结构:值类型 //类:引用类型 //声明的语法:class struct //在类中,构造函数里,既可以给字段赋值,也 ...

  7. python 学习(json)(转)

    Json简介:Json,全名 JavaScript Object Notation,是一种轻量级的数据交换格式.Json最广泛的应用是作为AJAX中web服务器和客户端的通讯的数据格式.现在也常用于h ...

  8. s3c2440液晶屏驱动 (内核自带) linux-4.1.24

    自带有一部分驱动的配置信息,只要修改这部分就能支援 不同的液晶屏 - /arch/arm/mach-s3c24xx/mach-smdk2440.c 另一部分在 /drivers/video/fbdev ...

  9. win10 使用docker

    新手 win10 下使用docker 1:下载docker for win 2:查看docker使用文档 https://github.com/widuu/chinese_docker 3 : 下载镜 ...

  10. poj3253 Fence Repair

    http://poj.org/problem?id=3253 Farmer John wants to repair a small length of the fence around the pa ...