如何在无外部脚本条件下实现SVG animate点击反向切换显隐交互

实现核心逻辑 #

• 完全依托SVG原生SMIL动画与事件机制，不引入外部脚本、不添加冗余不可见占位元素
• 利用两个互斥的opacity动画形成状态闭环：通过监听同一开关文本的点击事件、以及两个动画自身的终止事件，自动匹配奇数次点击触发淡入、偶数次点击触发淡出
• 省略动画的起始值from配置，动画触发时自动读取元素当前的实时opacity作为过渡起点，避免中途点击切换时出现值跳变

完整可运行代码 #

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 交互触发开关 -->
  <text id="toggletext" x="150" y="50" font-size="22" cursor="pointer">Toggle</text>
  <!-- 目标红色矩形，初始为完全透明 -->
  <rect id="rect" x="100" y="100" width="200" height="120" fill="#e53935" opacity="0">
    <!-- 淡入动画：平滑过渡至完全不透明 -->
    <animate 
      attributeName="opacity"
      to="1"
      dur="2s"
      fill="freeze"
      id="fadeIn"
      begin="toggletext.click; fadeOut.end"
      end="toggletext.click"
    />
    <!-- 淡出动画：平滑过渡至完全透明 -->
    <animate 
      attributeName="opacity"
      to="0"
      dur="2s"
      fill="freeze"
      id="fadeOut"
      begin="fadeIn.end"
      end="toggletext.click"
    />
  </rect>
</svg>

交互效果说明 #

• 初始状态下红色矩形完全透明
• 第1、3、5…奇数次点击Toggle文本时，矩形从当前透明度开始，用2s时间平滑过渡到完全不透明
• 第2、4、6…偶数次点击Toggle文本时，矩形从当前透明度开始，用2s时间平滑过渡到完全透明
• 即使在动画播放中途点击切换，也不会出现突兀的数值跳变，全程保持过渡平滑

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