子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

标签:SVG

环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

缘由:

在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度【效果如下图所示】,且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”。当时第一想法是用SVG,因为SVG在画弧线方面是行家呀,另外Canvas也是极好的选择。但是规定了不能用SVG和Canvas,我想还可以使用CSS3的clip和rotate属性,但当时脑抽的我竟记不起clip的语法袅(囧~)。笔试结束后,便去查clip属性的使用,总结了实现环形进度条的方法,于是便有了下文。…

+ 阅读更多

SVG绘图(二) —— 渲染满天星辰

看到一些炫酷的动画,总有种好想实现它,但是又无奈于腹中的代码量略少,只好不明觉厉,圆圆的大眼睛里满是对新事物的渴求。

在网页中嵌入动画,过去比较流行采用Falsh、Java…

+ 阅读更多

SVG绘图(一)—— 线条逐帧动态渲染

相信大家都见过这样的神奇技术:一根线条构成的画能自动逐帧描绘自己,特么炫酷。这种技术用Flash和AE等工具来实现的话不算难事,可惜所得文件略大。在本文中,想介绍一种稍微高那么一点逼格的实现方法,用纯codes写。所用到的技术是…

+ 阅读更多

【笔记】SVG性能优化

一. SVG的优化
1. 把一些要重复使用的元素都写在元素里。的子元素在文档解析的时候也不会渲染,只有在引用的时候才渲染,所以这样就可以做到一次解析,处处渲染,而不是每次使用的时候都解析一次,渲染一次,从而提高了SVG的性能。

+ 阅读更多