feComposite输出无法作为后续feGaussianBlur输入的技术咨询

的输出完全可以作为后续滤镜的输入，你遇到的问题不是因为它只能用于显示，而是没有正确使用result属性来传递中间处理结果。

问题根源 #

你之前的滤镜链里，合并得到形状#3后，没有给它指定result属性命名这个中间结果，导致后续的找不到目标输入，只能默认使用SourceGraphic，所以模糊效果才会作用在原始形状上，而非合并后的InnerShadow。

正确的滤镜实现示例 #

给每个关键步骤的输出指定result，后续滤镜通过in参数引用这个名称即可：

<filter id="innerShadowWithGlow">
  <!-- 生成形状#1：原路径填充黑色 -->
  <feFlood flood-color="black" result="blackFlood"/>
  <feComposite in="blackFlood" in2="SourceGraphic" operator="in" result="shape1"/>

  <!-- 生成形状#2：偏移模糊后的原形状 -->
  <feOffset dx="3" dy="3" in="SourceGraphic" result="offsetShape"/>
  <feGaussianBlur stdDeviation="2" in="offsetShape" result="shape2"/>

  <!-- 合并得到形状#3：InnerShadow -->
  <feComposite in="shape1" in2="shape2" operator="out" result="innerShadow"/>

  <!-- 对合并后的InnerShadow添加发光模糊 -->
  <feGaussianBlur stdDeviation="1.5" in="innerShadow" result="glowedInnerShadow"/>

  <!-- 最终将发光内阴影与原图形叠加输出 -->
  <feComposite in="SourceGraphic" in2="glowedInnerShadow" operator="over"/>
</filter>

扩展：加入修改初始形状 #

如果需要先对原始形状做形态学修改，只需要在最开头添加步骤，并让后续步骤引用修改后的结果即可：

<filter id="morphedInnerShadowWithGlow">
  <!-- 先修改初始形状 -->
  <feMorphology operator="erode" radius="0.5" in="SourceGraphic" result="morphedShape"/>

  <!-- 生成形状#1：修改后的形状填充黑色 -->
  <feFlood flood-color="black" result="blackFlood"/>
  <feComposite in="blackFlood" in2="morphedShape" operator="in" result="shape1"/>

  <!-- 生成形状#2：偏移模糊后的修改形状 -->
  <feOffset dx="3" dy="3" in="morphedShape" result="offsetShape"/>
  <feGaussianBlur stdDeviation="2" in="offsetShape" result="shape2"/>

  <!-- 合并得到InnerShadow并添加发光 -->
  <feComposite in="shape1" in2="shape2" operator="out" result="innerShadow"/>
  <feGaussianBlur stdDeviation="1.5" in="innerShadow" result="glowedInnerShadow"/>

  <!-- 最终输出 -->
  <feComposite in="morphedShape" in2="glowedInnerShadow" operator="over"/>
</filter>

关键总结 #

• 所有SVG滤镜原语的输出都可以通过result属性命名，后续滤镜用in参数直接引用这个名称
• 只是滤镜链中的一个处理节点，它的输出和其他滤镜原语的输出一样，完全可以被后续步骤复用
• 只要确保每个中间结果都有明确的result命名，就能按预期构建复杂的滤镜链

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