SVG
文章平均质量分 95
死神654
专注于提供前端知识分享,技术前沿&技能干货&工具推荐&技术方案,尽在前端兔技术团队
展开
-
写 SVG 动画必看!SVG系列文章3-动画标签
但是,据我测试,我的Chrome浏览器(版本36)上是没有效果的,FireFox浏览器效果杠杠的!所以,如果您的浏览器没有效果,但是手上有火狐,可以复制下面这个地址去FireFox浏览器下感受下:http://www.zhangxinxu.com/study/201408/horse-accesskey-value.svg。不过上面这个马走得有点假,怎么马儿一直都是水平的啊,这不符合物理学定律,是不科学的。这里轮到第二个动画的时候,路径是从第一个动画路径结束地方开始的,于是,3个动画完美无缝连接起来了。原创 2023-12-04 21:50:27 · 1036 阅读 · 0 评论 -
写 SVG 动画必看!SVG系列文章2-常见标签
所以在上面的例子里,第二个路径会先做 5 个像素单位的填色,紧接着是 5 个空白单位,然后又是 5 个单位的填色。第一个例子指定了 3 个数字,这种情况下,数字会循环两次,形成一个偶数的虚线模式(奇数个循环两次变偶数个)。所以该路径首先渲染 5 个填色单位,10 个空白单位,5 个填色单位,然后回头以这 3 个数字做一次循环,但是这次是创建 5 个空白单位,10 个填色单位,5 个空白单位。这种坐标系统是:以页面的左上角为 (0,0) 坐标点,坐标以像素为单位,x 轴正方向是向右,y 轴正方向是向下。原创 2023-11-30 10:35:40 · 1113 阅读 · 0 评论 -
写 SVG 动画必看!SVG系列文章1-简介
但是都没有获得批准。但是 SVG 也有自身的优点,比如它实现了 DOM 接口(比 Canvas 方便),不需要安装第三方扩展 (extensions,原文有误,应该是插件 plugins,类似 flash)。SVG 可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。viewBox 的 width、height 并不是SVG的实际宽高,而是SVG内的“分辨率”。width、height越大,SVG内的元素越小,反之,元素则越大(不影响SVG的背景图)。原创 2023-11-26 16:46:18 · 969 阅读 · 0 评论