BR 技术头条
zh www.zhangxinxu.com / 2024-11-02 16:18 / by @技术头条 / 原作者:@张鑫旭

搞懂SVG中各种Light相关的光源滤镜

本文深入解析了SVG中与光源相关的滤镜,包括`feDistantLight`、`fePointLight`和`feSpotLight`的用法,演示了如何通过这些光源滤镜实现点光源、平行光和聚光效果。利用这些滤镜,开发者可以为SVG元素增添逼真的光照和阴影效果,适用于卡片、按钮等交互元素的设计。文章还通过代码示例和效果演示,帮助读者更直观地理解光影滤镜的应用场景。

发表评论

相关分享

fe fed.taobao.org / 2022-07-24 20:57

用SVG实现一个优雅的提示框

Tooltips常被称为提示框(或信息提示框),提示框能够以较强的交互性、自由度为用户提供相应的提示信息。今天我们要聊的不是如何实现强大的交互行为,而是来看看如何以最好的方式来还原他们的视觉效果,并且能适用于不同的场景。

无图
zh www.zhangxinxu.com / 2022-06-19 23:21

SVG任意基本图形转path路径


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

无图
al www.alloyteam.com / 2022-06-19 23:03

在 kbone 中实现小程序 svg 渲染

kbone 是微信团队开源的微信小程序同构框架,与基于语法树转换的 Wepy、Taro 等传统框架不同,kbone 的思路是在逻辑层用类似 SSR 的方式模拟出 DOM 和 BOM 结构,让逻辑层的 HTML5 代码正常运行;而 kbone 会负责将逻辑层中的虚拟 DOM 以 setData 的形式传递给视图层,让视图层利用小程序组件递归渲染的能力,产生出真实的 DOM 结构。

使用 kbone 之后,我们可以将小程序页面理解为一个独立的 html 文档(而不是 SPA 中的一个 router page)。在每个页面的 JS 中初始化 kbone,为逻辑层提供虚拟 DOM 和 BOM 的环境,然后就可以像 H5 一样加载各种主流前端框架和业务代码,kbone 会负责逻辑层和视图层之间的 DOM 和事件同步。

无图
zh www.zhangxinxu.com / 2018-12-24 23:48

CSS vector-effect与SVG stroke描边缩放

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

无图
mp mp.weixin.qq.com / 2018-12-16 22:13

Android开发之图像处理那点事——滤镜

在 Android 开发中,一般对图像的处理就是 Bitmap(位图),它包含了图像的全部数据,即点阵和颜色值,点阵就是包含像素点的矩阵,而颜色值就是ARGB,分别代表透明、红色、绿色、蓝色通道,它们共同决定了像素点的颜色,今天我们来讲讲关于改变图像颜色的相关知识点。

无图
mp mp.weixin.qq.com / 2018-01-11 10:26

Android:修图技术之滤镜效果

Android对于图片的处理,最常使用到的数据结构是位图——Bitmap,它包含了一张图片所有的数据。整个图片都是由点阵和颜色值组成的,所谓点阵就是一个包含像素的矩阵,每一个元素对应着图片的一个像素。而颜色值——ARGB,分别对应着透明度、红、绿、蓝这四个通道分量,他们共同决定了每个像素点显示的颜色。上图显示的就是色光三原色。

无图
zh www.zhangxinxu.com / 2017-03-11 23:32

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

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

无图