svg中实现弥散光与点光源效果需组合和，配合、等增强阴影层次；纯css无法替代，必须用svg 定义。
SVG滤镜中实现弥散光（diffuse lighting）与点光源（point light）效果，关键在于组合<fediffuselighting></fediffuselighting>与<fepointlight></fepointlight>，并配合<feimage></feimage>或<feoffset></feoffset>等辅助滤镜增强立体感和阴影层次。纯CSS无法替代该效果，必须使用SVG <filter></filter> 定义。
基础滤镜结构：点光源+弥散光照
弥散光本身不发光，需搭配光源滤镜才能生效。<fepointlight></fepointlight>提供三维空间中的点状光源位置，<fediffuselighting></fediffuselighting>则根据输入图像的Alpha通道（或in="SourceGraphic"）计算表面法线与光线夹角，生成灰度光照贴图。
-
必须指定
in属性：通常设为"SourceAlpha"（利用透明度生成高度图）或"SourceGraphic"（需配合lighting-color控制颜色） -
点光源坐标是相对坐标系：
x/y/z默认单位为用户坐标（非像素），建议用0–100量级避免过强/过弱；z值越大，光源越“高”，阴影越柔和 -
diffuseConstant控制光照强度：典型值
0.8~1.2；surfaceScale影响“浮雕”深度，值越大起伏越明显（建议1–5）
生成真实阴影：叠加偏移与合成
仅靠<fediffuselighting></fediffuselighting>输出的是光照贴图（灰度），要形成带方向的阴影，需将其与原图分离、偏移后混合：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
<feoffset></feoffset>对光照结果做dx/dy偏移（模拟阴影投射方向），再通过<fecomposite></fecomposite>以operator="over"叠在原图下方 - 若需软阴影，可在偏移前插入
<fegaussianblur></fegaussianblur>（stdDeviation="1–2"），但注意性能开销 - 推荐结构顺序：
SourceAlpha → feDiffuseLighting → feOffset → feGaussianBlur（可选）→ feComposite（over）→ feMerge
动态控制技巧：CSS变量驱动滤镜参数
SVG滤镜支持CSS自定义属性绑定，可实现运行时调节光源位置或强度：
- 在
<filter></filter>内用var(--light-x, 50)代替固定数值，例如：<fepointlight x="var(--light-x, 50)" y="var(--light-y, 50)" z="var(--light-z, 30)"></fepointlight> - HTML中通过
style="--light-x: 70; --light-y: 30;"实时更新，无需JS操作DOM - 注意：部分旧版浏览器（如Safari 15前）不支持滤镜内CSS变量，需降级为JS动态重写
<fepointlight></fepointlight>属性
常见问题规避
实际应用中易出现“无效果”或“全黑/全白”，多因坐标或输入源配置错误：
-
输出为空白？检查
<fediffuselighting></fediffuselighting>的in是否指向有效源（避免拼写错误如"SourceAlpah"） -
阴影方向反了？
<feoffset></feoffset>的dx/dy符号与光源方向相反（光源在右上时，阴影应向左下偏移，即dx="-2" dy="2"） -
边缘锯齿严重？添加
filterUnits="userSpaceOnUse"并确保width/height足够覆盖偏移区域（如width="200%" height="200%" x="-50%" y="-50%"）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
