文章关键字 ‘路径’

SVG任意基本图形转path路径

2021年08月7日,星期六

图形路径封面图

虽然不属于常用场景,但是对于部分开发者却很需要,所以还是专门分享了出来,希望可以帮到需要的人。

阅读全文…

SVG任意图形path曲线路径的面积计算

2020年06月3日,星期三

路径面积计算多边形占位图

我写了一段JS,用来计算SVG任意图形元素,或者path字符串路径对应的面积大小,直接复制粘贴就可以用,希望可以解决你的开发需求。

阅读全文…

搞懂SVG/Canvas中nonzero和evenodd填充规则

2018年10月3日,星期三

nonzero evenodd缩略图

只要是路径填充,都有两种规则,nonzero和evenodd,无论是SVG中的路径填充,还是Canvas中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。换句胡说,这是超越各种语言,普世通用的技能点。下面,看看我能不能用足够精简的语言,尽可能让大家都搞懂这两种路径填充规则。

阅读全文…

【翻译】借助SVG实现背景透明JPG图片

2017年03月9日,星期四

人物往往色彩丰富,有时候会遇到需要背景透明的场景,结果PNG24图片尺寸太大,PNG8质量太差,JPG尺寸最小效果还好,但是背景又不透明,有没有什么办法就有JPG的小尺寸好效果,同时背景透明呢?本文的处理技巧可能会对你解决相关问题提供一些思路。

阅读全文…

PSD小图标变身SVG Sprites/font-face历险记

2014年12月2日,星期二

结语摘要:SVG是以后图形领域重要的媒介,如何导出适合开发的SVG图形是设计师必备技能,本文的填色等处理都是比较重要的处理细节;页面仔对图形软件使用不一定很熟,尤其illustrator,本文就拿一个比较复杂的图标举例,演示了如何迁移以及优化SVG路径。实际开发时候,一般的PSD中的小图标路径都是简单正常的,不需要“相减”或“联集”等路径操作。所以,弄清楚了本文的操作,基本上图标SVG变身都不是什么问题。

技术发展,以后肯定会出现PSD一键SVG转换工具的,本文内容就要作古了,或许现在就有,哪位小伙伴有所耳闻的,不妨分享下~~

阅读全文…

超级强大的SVG SMIL animation动画详解

2014年08月31日,星期日

本文详细介绍SVG SMIL animation动画。前半部分主要是效果体验,后半部分只要是参数示意。一定是目前国内最详尽讲解SVG SMIL animation动画的文章,没有之一。内容扎实,丰富的效果展示,大量的源码示意。相信一定会对您的学习有所帮助的。

阅读全文…

SVG+JS path等值变化实现CSS3兴叹的图形动画

2014年06月24日,星期二

数值变化驱动的SVG图形动画

展示SVG动画的优势与潜力,介绍SVG动画实现的基本理论,Snap.svg.js进一步的实例应用展示。多多demo,多多帅气的效果,多多通俗易懂的解释。希望本文的内容能够对您的学习有所帮助。

阅读全文…

深度掌握SVG路径path的贝塞尔曲线指令

2014年06月12日,星期四

如题,本文就是讲解SVG路径path的贝塞尔曲线指令的,不过,除了技术之外,还吐槽了很多自己的思考,自己的想法,对行业对前端的一些看法与认知,希望可以引起一些共鸣或争议。当然,主要内容还是讲得很详尽的,截图,demo,源代码展示一个都少不了。希望本文的内容能够对您的学习有所帮助!

阅读全文…

致设计师:图标图形制作-路径为王

2014年05月13日,星期二

楼外雨潺潺,春意阑珊!打球刚回身疲累,行文略懒散。一言蔽之,路径为王,谁知啰嗦甚多天甚晚,急得老婆直叫喊。

本来,下笔之时想大气磅礴说一通,现在看来,也就是不温不火的一句话:“设计师同事们,制作各类图标的时候使用路径绘制啊!会更powerful!”

阅读全文…