如何为Webflow中应用stroke-text-svg-filter的文本添加hover过渡效果？

问题核心：CSS transition 无法在 filter:url() 和 filter:none 之间实现平滑过渡，因为这属于非数值型的状态切换，浏览器不支持这种过渡逻辑。

修改后的实现代码 #

SVG滤镜部分（无需改动）

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute; height:0;">
  <defs>
    <filter id="stroke-text-svg-filter">
      <feMorphology operator="dilate" radius="1"></feMorphology>
      <feComposite operator="xor" in="SourceGraphic"/>
    </filter>
  </defs>
</svg>

CSS样式部分（关键修改）

.menu-link {
  position: relative;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* 可根据需求调整过渡时长（0.3s）和动画曲线（ease） */
}

.menu-link::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  filter: url(#stroke-text-svg-filter);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.menu-link:hover {
  opacity: 1;
}

.menu-link:hover::before {
  opacity: 0;
}

Webflow操作步骤 #

• 给所有带有 .menu-link 类的元素添加自定义属性：属性名填 data-text，属性值填该元素的文本内容（比如菜单的链接文字）。
• 将上述代码插入Webflow的自定义代码区域（建议放在页面头部或底部的自定义代码框中）。

原理：通过双层文本叠加（原文本+伪元素），利用opacity的数值过渡实现平滑切换——默认显示带滤镜的伪元素描边效果，hover时原白色填充文本逐渐显现，伪元素逐渐隐藏。

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