如何让SVG lighting filter仅作用于路径描边而非整个bounding box？

问题核心是当前滤镜使用的SourceAlpha对应元素的整个包围盒alpha通道，哪怕填充为none，滤镜依然会基于整个路径的边界范围计算。要让滤镜只作用于描边，需要先单独提取描边的轮廓作为滤镜输入：

修改后的SVG代码如下：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="220"
  height="220"
  fill="none"
  viewBox="0 0 220 220"
>
  <filter id="filter">
    <!-- 提取描边的alpha通道 -->
    <feStroke in="SourceGraphic" result="strokeAlpha"/>
    <!-- 对描边alpha做模糊处理 -->
    <feGaussianBlur in="strokeAlpha" stdDeviation="4" result="blur1" />
    <feSpecularLighting
      result="specOut"
      in="blur1"
      specularExponent="40"
      lighting-color="#48d913"
    >
      <fePointLight x="50" y="100" z="200" />
    </feSpecularLighting>
    <!-- 将高光效果与原描边合成 -->
    <feComposite
      in="SourceGraphic"
      in2="specOut"
      operator="arithmetic"
      k1="0"
      k2="1"
      k3="1"
      k4="0"
    />
  </filter>
  <g class="15-american-oak">
    <path
      stroke="#A32226"
      strokeMiterlimit="10"
      strokeWidth="1.22"
      d="M156.97 175.88c-24.23 0-43.95-19.72-43.95-43.95 0-24.23 19.72-43.95 43.95-43.95"
      style="filter: url(#filter)"
    />
  </g>
</svg>

关键修改说明 #

• 添加<feStroke in="SourceGraphic" result="strokeAlpha"/>：这个滤镜原语会单独提取元素的描边部分，生成仅包含描边alpha通道的图层，后续模糊和光照计算都基于这个图层进行，避免滤镜作用于整个包围盒。
• 将原feGaussianBlur的in参数从SourceAlpha改为strokeAlpha，确保模糊只针对描边区域。

修改后，光照滤镜效果就会仅作用于路径的描边部分，而非整个元素的bounding box。

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