SVG添加feDiffuseLighting光照滤镜边缘白边问题求解

实现目标 #

• 基于可自定义颜色、旋转角度、尺寸、路径属性的矢量图形，生成随机攀岩岩点画布
• 为岩点添加单侧/多侧随机阴影，模拟岩点相对背景凸起的立体感，提升视觉深度

当前问题 #

已为SVG岩点元素接入自定义光照滤镜，但滤镜生效后出现异常：SVG元素边缘存在向外溢出的白色杂边，岩点本身的填充色显示受影响。

核心诉求：

1. 修复现有滤镜异常，保留凸起光照效果的同时保证岩点填充色正常显示
2. 若滤镜方案修复成本过高，可提供其他可实现SVG路径边缘随机阴影、模拟凸起效果的可行思路

复现说明 #

• 滤镜核心实现逻辑封装在addFilter函数中，注释代码中addFilter()、applyFilter()两个函数的调用即可关闭滤镜，查看原始无滤镜效果
• 已附对比材料：无滤镜效果截图、启用光照滤镜后的异常效果截图、包含HTML/CSS/JS全量逻辑的可直接运行复现代码

解决方案 #

方案1：修复现有光照滤镜白边问题 #

白边溢出是SVG光照滤镜的典型问题，由两个原因共同导致，按以下步骤调整即可修复：

1. 扩大滤镜作用区域
   SVG滤镜默认作用区域是元素自身边界向外扩展10%（即x="-10%" y="-10%" width="120%" height="120%"），光照计算的边缘溢出部分会被裁切，直接把滤镜区域参数调大即可避免裁切：

   <filter id="rockLight" x="-20%" y="-20%" width="140%" height="140%">
     <!-- 原有滤镜逻辑保持不变 -->
   </filter>
   

2. 修正光照计算的Alpha通道处理
   光照滤镜默认直接读取元素的不透明度做凹凸计算，路径边缘抗锯齿产生的半透明像素会被光照算成高亮白色，在滤镜最开头加一个feFuncA把Alpha通道做阈值截断，再叠加原图形填充色即可：

   // 在addFilter函数内，原有光照计算逻辑前插入以下节点
   const alphaFix = document.createElementNS('http://www.w3.org/2000/svg', 'feComponentTransfer');
   const alphaFunc = document.createElementNS('http://www.w3.org/2000/svg', 'feFuncA');
   alphaFunc.setAttribute('type', 'table');
   alphaFunc.setAttribute('tableValues', '0 1'); // 半透明像素直接转完全透明/完全不透明，消除边缘抗锯齿导致的高亮白边
   alphaFix.appendChild(alphaFunc);
   filterNode.insertBefore(alphaFix, filterNode.firstChild);
   
   // 光照计算完成后，加feComposite把光照效果和原图形的填充色做混合，避免光照效果覆盖原有岩点颜色
   const composite = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite');
   composite.setAttribute('in', 'SourceGraphic');
   composite.setAttribute('in2', 'lightEffect'); // 替换为自身代码中光照效果输出节点的result属性值
   composite.setAttribute('operator', 'arithmetic');
   composite.setAttribute('k1', '0');
   composite.setAttribute('k2', '1');
   composite.setAttribute('k3', '1');
   composite.setAttribute('k4', '0');
   filterNode.appendChild(composite);
   

   调整后既可以保留光照产生的明暗凸起效果，也不会出现白边溢出、岩点本身颜色被覆盖的问题。如果需要随机阴影方向，只需要随机调整fePointLight/feDistantLight的光源坐标、角度参数即可。

方案2：轻量替代方案（无需复杂光照滤镜） #

如果不需要真实的光照凹凸计算，只是要随机方向的边缘阴影模拟凸起，可以直接给每个岩点随机生成偏移方向的drop-shadow，性能比光照滤镜更好，也不会出现边缘异常：

// 遍历所有岩点生成随机阴影
rocks.forEach(rock => {
  // 随机阴影方向：0-360度随机角度，偏移距离2-6px随机
  const angle = Math.random() * Math.PI * 2;
  const offsetX = Math.cos(angle) * (2 + Math.random() * 4);
  const offsetY = Math.sin(angle) * (2 + Math.random() * 4);
  const blur = 1 + Math.random() * 3;
  // 外阴影+内高光组合，模拟凸起效果：亮侧浅高光，暗侧深阴影
  rock.style.filter = `
    drop-shadow(${offsetX}px ${offsetY}px ${blur}px rgba(0,0,0,0.35))
    drop-shadow(${-offsetX*0.3}px ${-offsetY*0.3}px ${blur*0.5}px rgba(255,255,255,0.2))
  `;
})

如果要做多侧凸起的效果，只需要给单个岩点叠加多个不同方向的drop-shadow即可，实现成本更低，渲染性能更优。

内容的提问来源于stack exchange，提问作者Mit