“SVG相关”目录存档

如何让文字作为CSS背景图片显示?

2020年10月20日,星期二

文本变CSS背景封面图

本文介绍一种非常实用的技术,借助SVG让普通的text文字可以直接作为CSS背景图,方便实现很多的布局与样式效果。本文还提供转换工具和多个实时渲染的精彩案例,保证可以让大家学到不少东西。

阅读全文…

SVG feTurbulence滤镜深入介绍

2020年10月17日,星期六

feTurbulence滤镜与火焰效果

SVG feTurbulence滤镜可以用来模拟超级逼真的自然特效,例如火焰、水流、土石、烟雾、云朵等等,本文以接近1万字的篇幅详细深入介绍这个SVG滤镜,配备大量精彩实用案例,视觉表现前端必学知识,希望可以对您的学习所有帮助。

阅读全文…

文字沿着不规则路径排版布局的实现

2020年09月6日,星期日

封面占位图

SVG textPath可以让文字沿着指定的路径排列排版布局,文中还有配套开发的路径转换工具和诸多应用案例,精彩不容错过。

阅读全文…

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

2020年06月3日,星期三

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

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

阅读全文…

CSS vector-effect与SVG stroke描边缩放

2018年12月24日,星期一

vector-effect文章头图

默认情况下,我们改变SVG图形尺寸,stroke描边宽度也会跟着一起变化。有时候,我们希望描边宽度一直不变,怎么办呢?可以试试使用vector-effect属性。

阅读全文…

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

2018年10月3日,星期三

nonzero evenodd缩略图

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

阅读全文…

学习了,CSS中内联SVG图片有比Base64更好的形式

2018年08月19日,星期日

CSS内联SVG文章头图

难免的,我们需要在CSS中内联SVG图形,以前我都是把SVG文件转换成Base64格式然后内嵌,最近发现,这并不是最好的方法,最好的方法是使用部分转义的SVG原始代码,兼容IE9+,而且颜色什么的可以直接在CSS中修改。这种方法具体真容是什么?有兴趣可以进去看下。其中有个炸裂的SVG在线压缩合并工具,相信你会喜欢的。

阅读全文…

借助SVG文字尺寸自动缩放甚至突破Chrome 12px限制

2018年03月24日,星期六

文字大小尺寸跟着容器的尺寸变化。这对于一些需要尺寸自适应的slogon内容就很实用,例如移动端320~414宽度间的自适应。纯CSS可以实现,但如果局部自适应实现就比较麻烦,canvas则效果不好,SVG实现则兼顾两者的优点……

阅读全文…

CSS, SVG和canvas分别实现文本文字纹理叠加效果

2018年02月27日,星期二

本文这里所说的叠加,就是混合模式中的叠加,也就是说,本文要实现的效果是,文字本身的颜色和纹理进行叠加,而非直接填充纹理。

CSS, SVG和canvas都能实现类似的效果,我们一个一个来看一下……

阅读全文…

小tips: 0学习成本实现HTML元素粘滞融合效果

2017年12月21日,星期四

元素粘滞融合效果很酷,看上去很难实现,实际上实现却非常容易,几乎0学习成本,一起来看看究竟吧!

阅读全文…