项目中遇到个特殊的圆环图形加动画需求，看我如何使用M…A…圆弧指令手写最终的SVG代码（内含坐标计算JS方法，文字环绕实现等）。
阅读全文…
标签：path, stroke, stroke-dasharray, stroke-dashoffset, SVG, textPath, 贝塞尔曲线 发布在 SVG相关 | 3 条评论 »
充分且深入学习SVG feColorMatrix滤镜的语法，矩阵变换原理，常见颜色滤镜参数值，生成工具等。
标签：ColorMatrixFilter, feColorMatrix, filter, Matrix, SVG滤镜, 滤镜, 矩阵 发布在 SVG相关 | 2 条评论 »
SVG光影相关的滤镜元素有5个，乍一看，还挺复杂，可细细一学，哦，原来也就是这么回事。
标签：feDiffuseLighting, feDistantLight, fePointLight, feSpecularLighting, feSpotLight, SVG, SVG滤镜, 滤镜 发布在 SVG相关 | 没有评论 »
没想到吧，借助SVG看似不起眼的feMerge滤镜，我们可以轻松实现任意DOM元素的样式的投影复制效果，还支持动画哦。
标签：animate, feComponentTransfer, feFuncA, feMerge, feMergeNode, feOffset, filter, opacity, SMIL, SVG滤镜 发布在 SVG相关 | 12 条评论 »
本文介绍两种Web中实现图片马赛克的方法，一个是SVG滤镜的，一个基于某个CSS属性的，都比较简单，不复杂。
标签：drawImage, feComposite, feFlood, feMorphology, feTile, filter, image-rendering, SVG滤镜, 图像处理, 图片压缩, 马赛克 发布在 CSS相关, SVG相关 | 8 条评论 »
今天终于发现了一种适用于各种背景环境的文字变瘦方法，此方法居然无需用到任何与文字相关的CSS属性。
标签：feMorphology, filter, font-weight, SVG滤镜, text-shadow, text-stroke 发布在 SVG相关 | 7 条评论 »
模糊和投影算是SVG滤镜中学习难度最低的元素了，所以放在一起介绍，从中可以看到CSS模糊和投影滤镜语法的影子。
标签：clipPath, drop-shadow, feDropShadow, feGaussianBlur, filter, stdDeviation, 高斯模糊 发布在 SVG相关 | 4 条评论 »
要想成为前端图形表现领域的高手，要必要弄懂SVG中各种滤镜元素的语法与作用，先从简单的feblend元素开始。
标签：feBlend, feImage, filter, SVG滤镜, 混合模式 发布在 SVG相关 | 2 条评论 »
虽然不属于常用场景，但是对于部分开发者却很需要，所以还是专门分享了出来，希望可以帮到需要的人。
标签：path, 路径 发布在 SVG相关 | 10 条评论 »
虽然CSS中有专门实现投影或者模糊效果的CSS属性，但是由于语法限制以及兼容性限制等原因，这些CSS并不能覆盖所有效果，此时可以借助SVG滤镜“曲线救国”。
标签：backdrop-filter, drop-shadow, feComposite, feGaussianBlur, filter, SVG, SVG滤镜, 模糊, 滤镜 发布在 SVG相关 | 6 条评论 »
张鑫旭more，09年华中科技大学毕业，现上海，就职于阅文集团，专注web前端偏前领域，著有《CSS世界》《CSS选择器世界》《CSS新世界》《HTML并不简单》
邮箱：zhangxinxu@zhangxinxu.com
关注我：微信微博掘金知乎抖音热更B站Gitee
我的应用
我的应用