svg标签
在页面上画图无非有两种方法,一种是canvas,另外一种就是svg了,canvas之前已经介绍过了,现在来介绍一下svg吧。
其实早在svg出现以前几年,微软已经推出了类似的东西,叫做vml,早期是为了使excel的图形转化为网页来展示而做的,但是由于过早的创新,当时并不被大家接受,后来svg出现,大家开始对这种“工具”产生兴趣,vml才重新被大家发现。(这个故事告诉大家,过早的创新也容易失败,因为每一种新生事物的出现都应该在大家能接受的范围以内,超出大家的认知太多,就不容易被大家接受了,人类都是恐惧新事物的~~)
svg标签写法:
<svg width="800" height="600">
<line x1="100" y1="100" x2="300" y2="400"></line>
</svg>
先做一个比较:
canvas:性能高,但是交互不方便
svg/vml:性能相对较低(特别在图形多的时候会更明显),但是实现交互和一般的html元素是一样的,可以实现onxxxx和addEventListener来绑定事件,进行交互~~
svg的用法和html元素类似,可以用css改变其某些样式(stroke,stroke-width,fill),可以通过dom获取svg元素,可以实现onxxxx和addEventListener来绑定事件。
不同的是:
- 获取具体属性值时不能用点表示法(形如line.x1),只能用(line.getAttribute('x1')和line.setAttribute('x1','200')),这样更接近于XML(看下面附图)
- 创建svg元素的时候,不能用document.createElement('line'),要用document.createElementNS('http://www.w3.org/2000/svg','line'),其实document.createElement是document.createElementNS('http://www.w3.org/1999/html','div')的简写而已
- svg属性只有css属性才能受transition动画影响,如果用js改变其他属性(例如circle的r),不会有过渡动画(但是chrome实现了,其他例如ff没有实现),只能自己写(setInterval或者requestAnimationFrame)
svg的几种简单的写法:
1.线 line 2.矩形 rect 3.圆 circle 4.椭圆 ellipse 5.多线 polyline 6.多边形 polygon
<svg width="800" height="600">
<line x1="50" y1="50" x2="100" y2="100"></line>
<rect x="150" y="150" width="100" height="50" rx="50" ry="10"></rect>
<circle cx="220" cy="80" r="40"></circle>
<ellipse cx="400" cy="100" rx="100" ry="50"></ellipse>
<polyline points="550,50 680,80 650,180 600,200 540,100"></polyline>
<polygon points="550,250 680,280 650,380 600,400 540,300"></polygon>
</svg>
值得注意的是圆和椭圆的圆心是cx,cy不是x,y,矩形和椭圆都有rx和ry。
svg最厉害的无疑是path了
掌握常用的指令: M(moveTo)、L(lineTo)、A(画弧)、Z(封闭路径)
M和L后面跟的都是点坐标,Z后面没有参数,
A的参数就比较复杂: 横半径 纵半径 x轴旋转 大弧标志 镜像标志(如果是1,取起点到终点连线的左边) 终点x 终点y
举个栗子:
<path d="
M 300,300
L 300,150
A 150,150,0,0,1,357,161
Z
"></path>
svg标签的更多相关文章
- web自动化之svg标签定位
今天在定位元素的时候,发现页面有一个svg标签需要进行定位. 于是便使用常规的xpath定位方法试了一下,很明显结果是不行的,哈哈哈... 错误定位方法://div[@class="oper ...
- svg 标签
SVG中的’defs’ and ‘use’-可复用的图元定义 在下一个示例中,我使用了defs中的元素之前,定义了如何去展现图元. <?xml version="1.0" s ...
- xpath如何使用正则、xpath定位svg标签、xpath常用集合
自己用到的xpath都收集下咯!!! 持续更新本页面 xpath查找svg图标 xpath('//*[local-name() = "svg" and @class="_ ...
- d3.js svg中 g 标签问题一览
svg 中的g标签, 算是比较特殊 1 没有x y属性 2 没有width height 属性 3 不能fill 4 .... g标签基本只管分组问题, 其他功能一概不提供 要解决这些问题, 直接在g ...
- svg image标签降级技术
1.svg image标签降级技术: svg不能很好的在anroid2.3中得到支持,需要额外的补充,IE8-以及Android 2.3默认浏览器是不支持SVG的. svg image标签降级技术,这 ...
- 获取SVG中g标签的宽度高度及位置坐标
1. 问题的出现 对于普通的HTML元素,有很多获得其宽度width.高度height.距左left.距顶top等属性的方法: 类似offsetWidth,clientWidth,width之类的,通 ...
- 【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...
- HTML5_04之SVG绘图
1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...
- Notes:SVG(1)
SVG,"Scalable Vector Graphics"可伸缩矢量图形,基于可扩展标记语言,用于描述二维矢量图形的一种图形格式. SVG是纯粹的XML,可以使用以下方法插入到H ...
随机推荐
- linux内核分析第四次实验
实验步骤: 使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用.本次实验中我使用第20号系统调用getpid()函数,用于取得进程识别码. C代码(getpid.c): #include ...
- ros-安装
1.安装了ubuntu for ros. 运行评论下边那条命令: 2.rtabamp 3.准备安装机器人导航仿真系统:https://blog.csdn.net/wangchao7281/articl ...
- 转载 loadrunner的一些问题解决
sckOutOfMemory 7 内存不足 sckInvalidPropertyValue 380 属性值不效 sckGetNotSupported 394 属性不可读 sckGetNotSup ...
- [CB]2018全球半导体营收4700亿美元 三星继续碾压英特尔
2018全球半导体营收4700亿美元 三星继续碾压英特尔 https://www.cnbeta.com/articles/tech/808833.htm Gartner最新报告显示,2018年全球半导 ...
- FuelPHP 系列(六) ------ CURD 增删改查
一.create $article = new Model_Article(); // 或 $article = Model_Article::forge(); // 保存数据,返回新增数据 id $ ...
- sleep、yield、wait、join的区别(阿里面试)
1. Thread.sleep(long) 和Thread.yield()都是Thread类的静态方法,在调用的时候都是Thread.sleep(long)/Thread.yield()的方式进行调 ...
- MySQL基本概念以及简单操作
一.MySQL MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MyS ...
- Socket网络编程--Libev库学习(1)
这一节是安装篇. Socket网络编程不知不觉已经学了快两个月了.现在是时候找个网络库学学了.搜索了很多关于如何学网络编程的博客和问答.大致都是推荐学一个网络库,至于C++网络库有那么几个,各有各的好 ...
- HNOI2017大佬
贼难的一道题 虽然算法都不难,但组合起来就是想不到 首先,最简单的一步,对所有大佬,嘲讽你减的自信值和你做水题回复自信值都是不变的,写个\(dp\),设\(dp[i][j]\)表示第\(i\)天自信值 ...
- TensorFlow分布式计算机制解读:以数据并行为重
Tensorflow 是一个为数值计算(最常见的是训练神经网络)设计的流行开源库.在这个框架中,计算流程通过数据流程图(data flow graph)设计,这为更改操作结构与安置提供了很大灵活性.T ...