使用SVG滤镜实现drop-shadow扩散动画及性能探讨

问题1：主流浏览器中，通过ID引用的复杂SVG滤镜是否会被硬件加速？实现方式是怎样的？ #

• 主流浏览器（Chrome、Firefox、Safari、Edge）对引用的SVG滤镜大多会启用硬件加速，具体实现逻辑如下：
  • 当元素应用SVG滤镜时，浏览器会先将元素渲染为GPU可处理的纹理（texture），随后把滤镜的操作转化为GPU着色器（shader）程序，并行处理纹理数据。
  • 对于由<feMorphology>、<feGaussianBlur>等基础滤镜组合成的复杂效果，只要操作可被GPU并行计算，就会自动触发硬件加速；但如果滤镜涉及复杂的像素级条件判断或外部资源引用（如<feImage>加载外部图），可能会回退到CPU渲染。

问题2：如何用SVG滤镜实现box-shadow spread的扩散动画（性能优于box-shadow）？ #

要模拟box-shadow的硬轮廓spread扩展效果，可通过SVG滤镜的<feMorphology>（膨胀操作）配合CSS变量实现动画，具体方案如下：

实现思路 #

1. 用<feMorphology>的operator="dilate"（膨胀）模拟spread的扩展，radius参数对应spread的尺寸；
2. 用<feComposite>提取元素的Alpha通道，配合<feFlood>生成半透明轮廓色；
3. 通过CSS变量控制滤镜的radius值，实现平滑过渡动画。

完整代码示例 #

SVG滤镜定义

<svg width="0" height="0" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">
  <filter id="spreadShadow">
    <!-- 生成目标半透明色 -->
    <feFlood flood-color="hsla(360, 80.5%, 55.7%, 0.1)" result="outlineColor" />
    <!-- 提取原元素的形状轮廓 -->
    <feComposite in="outlineColor" in2="SourceAlpha" operator="in" result="baseOutline" />
    <!-- 膨胀轮廓，radius由CSS变量控制 -->
    <feMorphology in="baseOutline" operator="dilate" radius="var(--spread, 0)" result="expandedOutline" />
    <!-- 合并原元素与膨胀后的轮廓 -->
    <feMerge>
      <feMergeNode in="expandedOutline" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>

HTML与CSS

<button class="spread-btn">Button</button>

.spread-btn {
  appearance: none;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  background: #ffffff;
  --spread: 0;
  filter: url(#spreadShadow);
  transition: --spread 180ms ease-in-out;
  transform: scale(5);
  transform-origin: 0 0;
  margin: 20px;
}

.spread-btn:hover {
  --spread: 3;
}

性能补充说明 #

• 该方案利用<feMorphology>的GPU加速特性，相比box-shadow的spread动画（依赖CPU计算像素扩散），在高频触发或批量元素场景下性能更稳定；
• 旧版iOS Safari（14.x及以前）对CSS变量控制SVG滤镜参数的支持有限，可通过JavaScript动态修改SVG滤镜的radius属性做兼容。

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