SVG的使用
一，svg可以在浏览器中直接打开
二，在html使用<img/>标签引用
三，直接在html中使用svg标签
四，作为css背景
SVG支持ie9+ ,chrome 33.0+,firefox 28.0+,safari 7.0+
下面是一个结合了html5中的知识做简单的小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style type="text/css">
#progress {
stroke-dasharray: 100px;
stroke-dashoffset: 100px;
}
#progress {
stroke-dasharray: 100px;
stroke-dashoffset: 100px;
animation: progressAnimation 2000ms linear infinite;
}
@keyframes progressAnimation {
from {
stroke-dashoffset: 100px;
}
to {
stroke-dashoffset: 300px;
}
}
</style>
</head>
<body>
<svg width="240" height="240" xmlns="">
<circle r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/>
<circle id="progress" r="90" cy="120" cx="120" stroke-width="3" stroke="#00ff00" fill="none"/>
</svg>
</body>
</html>
SVG的使用的更多相关文章
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- 【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...
- SVG:textPath深入理解
SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...
- SVG:linearGradient渐变在直线上失效的问题解决方案
SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...
- HTML5_05之SVG扩展、地理定位、拖放
1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg"> 方法二:<body><svg></svg>&l ...
- HTML5_04之SVG绘图
1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...
- 关于SVG的viewBox
在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...
- Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条
stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...
- Notes:SVG(3)---滤镜和渐变
SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...
随机推荐
- 三:Go编程语言规范-表达式
1.限定标识符 限定标识符为使用包名前缀限定的标识符.包名与标识符均不能为空白的.限定标识符用于访问另一个包中的标识符,它必须被导入. 标识符必须是已导出且在该包的包块中声明. math.Sin // ...
- 二：shell之bash变量
1.变量的分类: 用户自定义变量: 变量自定义 默认存储是字符串环境变量: 这种变量中主要保存的是和系统操作环境相关的数据.变量可以自定义,但是对系统生效的环境变量名和变 ...
- [转]NopCommerce 多数据库方案
本文转自:http://www.cnblogs.com/YUTOUYUWEI/p/5538200.html 有时候一个项目需要连接多个数据库,以实现不同数据库的数据在同个项目的共享. 如果已经安装了n ...
- Vijos1019 补丁VS错误[最短路 状态压缩]
描述 错误就是人们所说的Bug.用户在使用软件时总是希望其错误越少越好,最好是没有错误的.但是推出一个没有错误的软件几乎不可能,所以很多软件公司都在疯狂地发放补丁(有时这种补丁甚至是收费的).T公 ...
- 分层开发之MySchool
No.1实现登陆功能,验证用户名和密码.从数据库里进行匹配,看是否有符合要求的数据. 在DAL层编写代码,返回值为布尔类型.方法参数为(student实体类对象),使用参数化SqlParameter类 ...
- AC日记——数字统计 openjudge 1.5 41
41:数字统计 总时间限制: 1000ms 内存限制: 65536kB 描述 请统计某个给定范围[L, R]的所有整数中,数字2出现的次数. 比如给定范围[2, 22],数字2在数2中出现了1次, ...
- NOIP模拟赛 寻找
题目描述 “我有个愿望,我希望穿越一切找到你.” 这是个二维平面世界,平面上有n个特殊的果实,我从(0,0)点出发,希望得到尽量多的果实,但是出于某种特殊的原因,我的运动方式只有三种(假设当前我在(x ...
- http协议.md
该文转自:HTTP协议详解 HTTP协议详解 引言 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这 ...
- js函数命名常用动词
get 获取/set 设置, add 增加/remove 删除 create 创建/destory 移除 start 启动/stop 停止 open 打开/close 关闭, read 读取/writ ...
- SQL Server存储过程中使用表值作为输入参数示例
这篇文章主要介绍了SQL Server存储过程中使用表值作为输入参数示例,使用表值参数,可以不必创建临时表或许多参数,即可向 Transact-SQL 语句或例程(如存储过程或函数)发送多行数据,这样 ...