为带描边的未闭合SVG路径添加drop-shadow滤镜导致路径消失

问题描述 #

在SVG中，为带描边的未闭合<path>元素应用drop-shadow滤镜时，该路径会直接消失。不带滤镜的同类型未闭合路径可正常渲染，且该滤镜在<rect>元素上也能正常生效。请问是否可为带描边的未闭合path添加阴影滤镜？是否必须使用闭合路径才能应用drop-shadow滤镜？

示例代码 #

<!DOCTYPE html>
<html lang="en">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="drop-shadow" color-interpolation-filters="sRGB">
      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.5"/>
    </filter>
  </defs>
  <!-- 使用滤镜后消失的蓝色路径 -->
  <path d="M000,100 L300,100" stroke="blue" fill="transparent" stroke-width="5" filter="url(#drop-shadow)"/>
  <!-- 正常渲染的红色路径 -->
  <path d="M000,200 L300,200" stroke="red" fill="transparent" stroke-width="5" filter=""/>
  <!-- 滤镜生效的绿色矩形 -->
  <rect filter="url(#drop-shadow)" x="0" width="300" height="10" fill="green"/>
</svg>
</html>

问题原因 #

feDropShadow滤镜默认优先基于元素的填充区域生成阴影，而未闭合路径设置fill="transparent"后，填充区域的Alpha值为0，滤镜无法识别到可生成阴影的有效区域；同时部分浏览器的滤镜处理逻辑会导致原描边也被过滤，最终路径消失。而<rect>有明确的填充区域，所以滤镜能正常工作。

解决方法 #

不需要必须使用闭合路径，只需调整滤镜逻辑，让它识别描边的Alpha通道，同时保留原路径。以下是两种可行方案：

方案1：兼容型滤镜（适配所有浏览器） #

修改滤镜，先提取元素的Alpha通道（包含描边），再生成阴影并与原图形合并：

<filter id="drop-shadow" color-interpolation-filters="sRGB">
  <!-- 提取原图形的Alpha通道 -->
  <feColorMatrix type="matrix" values="0 0 0 0 0
                                       0 0 0 0 0
                                       0 0 0 0 0
                                       0 0 0 1 0" result="alpha"/>
  <!-- 扩展Alpha通道，让描边的阴影更清晰 -->
  <feMorphology operator="dilate" radius="2" in="alpha" result="dilated"/>
  <!-- 生成阴影 -->
  <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.5" in="dilated"/>
  <!-- 将原图形叠加在阴影上方 -->
  <feComposite in="SourceGraphic" operator="over"/>
</filter>

方案2：简化型滤镜（现代浏览器支持） #

直接使用feGaussianBlur+feOffset组合实现阴影，这种方式会自动识别描边的形状：

<filter id="drop-shadow" color-interpolation-filters="sRGB">
  <feOffset dx="2" dy="2"/>
  <feGaussianBlur stdDeviation="3" result="blur"/>
  <feFlood flood-opacity="0.5"/>
  <feComposite in2="blur" operator="in"/>
  <feMerge>
    <feMergeNode/> <!-- 渲染阴影 -->
    <feMergeNode in="SourceGraphic"/> <!-- 渲染原图形 -->
  </feMerge>
</filter>

额外优化建议 #

将路径的fill="transparent"改为fill="none"，可以避免填充区域对滤镜的干扰，同时不影响描边的正常显示。

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