文章关键字 ‘SVG’

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

2020年06月3日,星期三

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

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

阅读全文…

CSS paint-order祝大家元旦快乐

2020年01月1日,星期三

SVG中图形绘制默认顺序是先填充,再描边,再标记,由于描边是居中的,就会导致文字描边的时候文字本身的填充会被覆盖掉,使用CSS paint-order可以有效解决这个描边问题。

阅读全文…

纯前端JS zip打包文件并下载

2019年08月17日,星期六

zip压缩与下载

本文主要介绍如何使用jszip这个开源项目纯前端打包并下载ZIP文件,顺便介绍下FileSaver.js这个非常强悍的纯前端下载JS。

希望本文内容能够解决你项目中遇到的问题。

阅读全文…

是时候了,无外链的CSS开发策略

2019年08月17日,星期六

无外链的CSS开发

是时候了,如果你的项目不需要兼容IE8浏览器,则试试贯彻下面这条CSS开发策略:CSS文件永无外链!好处多多哟。

阅读全文…

CSS实现文字下面波浪线动画效果

2019年04月21日,星期日

波浪线头图占位图

很多人对本站部分链接hover时候出现的波浪线动画很感兴趣,本文就专门介绍相关的技术实现,共介绍两种web前端实现方法,希望可以对感兴趣的人带来帮助。

阅读全文…

CSS vector-effect与SVG stroke描边缩放

2018年12月24日,星期一

vector-effect文章头图

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

阅读全文…

纯CSS实现任意格式图标变色的研究

2018年11月24日,星期六

多彩变色

想要使用CSS改变PNG小图标的颜色,似乎不太可能。但,实际上,我们可以有多种方法改变PNG小图标,SVG小图标的颜色,并且是任意的色值,可以是作为背景图片的图标,也可以是内联的图标。究竟如何CSS改变图标的颜色呢?不妨点进去围观一番。

阅读全文…

学习了,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实现则兼顾两者的优点……

阅读全文…

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

2017年12月21日,星期四

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

阅读全文…