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 ...
随机推荐
- #科委外文文献发现系统——导出word模板1.0
ps:该篇文档由实验室ljg提供. Crowdsourcing 一. 技术简介 Crowdsourcing, a modern business term coined in ...
- Linux内核总结博客 20135332武西垚
http://www.cnblogs.com/wuxiyao/p/5220677.htmlhttp://www.cnblogs.com/wuxiyao/p/5247571.htmlhttp://www ...
- 同步手绘板——android端取色
作为绘图软件,颜色的选取必不可少,在刚开始取色时,所选颜色和显示颜色始终不一致,比如选取白色显示绿色,在这个问题上消耗了太多的时间,后来发现是比例问题,通过修改实现恰当的取色.
- 第五届蓝桥杯C++B组 地宫取宝
代码: #include <bits/stdc++.h> using namespace std; #define ll long long const ll mod = 1e9 + 7; ...
- Python表达式与运算符
表达式与运算符 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 算术运算符 运算符 描述 + 加 - 两 ...
- ubuntu 安装 postgresql
安装环境: Ubuntu 10.04-desktop-i386 PostgreSQL 8.4 1. 安装PostgreSQL 输入如下命令 sudo apt-get install postgresq ...
- python异常提示表
Python常见的异常提示及含义对照表如下: 异常名称 描述 BaseException 所有异常的基类 SystemExit 解释器请求退出 KeyboardInterrupt 用户中断执行(通常是 ...
- asp.net 后台<%@ Page%> page指令属性
aspx文件有如下一行代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...
- Luogu4609 FJOI2016建筑师(斯特林数)
显然排列中的最大值会将排列分成所能看到的建筑不相关的两部分.对于某一边,将所能看到的建筑和其遮挡的建筑看成一个集合.显然这个集合内最高的要排在第一个,而剩下的建筑可以随便排列,这相当于一个圆排列.同时 ...
- C# 后台访问webapi
具体在哪看见的忘记了. 异步: public static class CallWebAPI { public static async Task<string> APIPost(stri ...