来源:SVG的用法 补充 CANVAS产生的dom数量比SVG要少 SVG可以使用css设置动画样式 对于动画性能来说,不能说svg或canvas谁更优,而是要看情况: SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SVG 中,每个被绘制的图形均被视为对象.如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形. Canvas 通过 JavaScri…

一.前言 说起Iconfont,对大多数人来说可能不是什么新的技术了,现在好多大网站已经开始使用Iconfont.博主今天主要是简单说一下它的使用方法,聊聊使用它时可能遇到哪些坑,不熟悉的同学可以简要看一下,资深了解的同学,如果发现问题,还请指正. 二.什么是Iconfont 有的同学可能会问什么是Iconfont ? 其实,Iconfont 就是指用字体文件取代图片文件,来展示图标.特殊字体等元素的一种方法. 那么哪些网站在用它呢?有什么优缺点?以及如何使用它,接下来我们一一解答这几个问题.…

最近做了埋点方案XTracker的轨迹回放功能,大致效果就是,在指定几个顺序的点之间形成轨迹,来模拟用户在页面上的先后行为(比如一个用户先点了啥,后点了啥).效果图如下: 在这篇文章中,我们来聊聊轨迹回放的一些技术细节. 注意,本文只关注轨迹的绘制,并不讨论轨迹的各种生成算法. 绘制红点坐标 在绘制轨迹前,需要先绘制轨迹经过的红点坐标.使用SVG绘制红点非常简单: <svg width="500" height="500"> <circle r=&…

一些准备 在开始这个话题之前,我们有必要简单回顾一下 浏览器(webkit)的网页渲染过程(如果想要详细了解这个过程,可以戳我几年前写的一篇文章.): 我们知道,浏览器在渲染过程中,如遇到节点需要依赖其他资源(比如:图片.CSS.JavaScript.video等),浏览器会通过网络去加载它们.这其中大部分的资源是异步加载的,不会阻塞渲染,除了 JavaScript(未被标记为异步的方式). 网页的加载和渲染依赖网络与资源加载,网页本身是一种资源,它所依赖的 js.css.图片.视频等也是资源.…

0x00 前言 目前所在的团队实行敏捷开发已经有了一段时间了.敏捷开发中重要的一个话题便是如何对项目进行恰当的版本管理.项目从最初使用svn到之后的Git One Track策略再到现在的GitFlow策略,中间有经验也有教训,所以记录在本文,既是和各位朋友交流也供自己日后查阅. 0x01 基础:Unity项目如何做版本管理? 为什么更喜欢git? 初来项目组到时候,项目还在使用SVN作为版本管理的工具.作为一个不喜欢SVN的人,自然而然想到了换用git来做版本管理.这里当然并不是说svn不如g…

前言: 其实小匹夫在U3D的开发中一直对U3D的跨平台能力很好奇.到底是什么原理使得U3D可以跨平台呢?后来发现了Mono的作用,并进一步了解到了CIL的存在.所以,作为一个对Unity3D跨平台能力感兴趣的U3D程序猿,小匹夫如何能不关注CIL这个话题呢?那么下面各位看官就拾起语文老师教导我们的作文口诀(Why,What,How),和小匹夫一起走进CIL的世界吧~ Why? 回到本文的题目,U3D或者说Mono的跨平台是如何做到的? 如果换做小匹夫或者看官你来做,应该怎么实现一套代码对应多种平…

在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去画出一些十分复杂动画的线条,这个时候,就要借助前端好帮手 PS 和 AI,而本文就是介绍如何导出复杂的 SVG 路径.: 好了,假定我们现在要制作下图 GIF 这样的一个 loading 图: 上面这个 SVG 线条动画的路径 path ,如果靠自己手工一个点一个点定位调试画出来的话,嘿嘿嘿你去试试…

通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画. 举个栗子 SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画.尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条: 把里面的进度条单独拿出来,也就是需要实现这样一个效果: 脑洞大开一下,使用…

SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200…

SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke="url(#orange_red)"/> 如果,stroke里使用的是渐变效果,那么,在各种浏览器上都会出现同一个BUG,这条线消失了. 原因不好排查,但是道理很简单,参考: www.w3.org Keyword objectBoundingBox should not be used wh…