如何保留SVG描边动画结束后的状态直至鼠标移出？

嘿，这个需求其实很好实现，核心就是让动画结束后停在最终状态，直到鼠标移出再恢复初始样式。我给你整理了两种可行的方案：

方案一：利用动画填充模式（animation-fill-mode） #

我们可以给动画加上forwards属性，让动画结束后保持最后一帧的状态，同时在鼠标移出时重置元素样式，回到初始状态。

修改后的完整代码如下：

<svg class="svg-cab" height="35px" width="35px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 228.7">
  <defs>
    <style>
      .cls-21 {
        fill: white;
        cursor: pointer;
        /* 初始状态：无描边，dashoffset设为1000 */
        stroke: none;
        stroke-dashoffset: 1000;
        stroke-dasharray: 1000;
        stroke-miterlimit: 10;
        stroke-width: 20px;
        /* 鼠标移出时的过渡，让重置更平滑（可选） */
        transition: stroke-dashoffset 0s, stroke 0s;
      }
      .svg-cab:hover .cls-21 {
        stroke: white;
        animation: dash 1s linear forwards;
      }
      /* 鼠标移出时重置样式 */
      .svg-cab:not(:hover) .cls-21 {
        stroke-dashoffset: 1000;
        stroke: none;
      }
      @keyframes dash {
        from {
          stroke-dashoffset: 999;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
    </style>
  </defs>
  <path class="cls-21" d="M277.3,192.9a53.3,53.3,0,1,1-51.6-51.5A53.3,53.3,0,0,1,277.3,192.9Z" transform="translate(-123 -136.3)"/>
  <path class="cls-21" d="M269.3,264H178.7A50.7,50.7,0,0,0,128,314.7V352a8,8,0,0,0,8,8H312a8,8,0,0,0,8-8V314.7A50.7,50.7,0,0,0,269.3,264Z" transform="translate(-123 -136.3)"/>
</svg>

关键说明： #

• animation-fill-mode: forwards：这个属性会让动画执行完毕后，保持to帧的状态（也就是stroke-dashoffset为0，有白色描边）。
• .svg-cab:not(:hover) .cls-21：当鼠标移出SVG容器时，重置描边偏移量和描边颜色，回到初始无描边的状态。
• 可选的transition：如果希望鼠标移出时重置得更平滑，可以调整transition的时长，比如改成transition: stroke-dashoffset 0.3s, stroke 0.3s。

方案二：用过渡（transition）替代动画 #

如果你觉得keyframes有点麻烦，也可以用transition来实现类似效果，代码更简洁：

<svg class="svg-cab" height="35px" width="35px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 228.7">
  <defs>
    <style>
      .cls-21 {
        fill: white;
        cursor: pointer;
        stroke: white;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        stroke-miterlimit: 10;
        stroke-width: 20px;
        /* 初始状态无描边 */
        stroke: none;
        /* 过渡动画时长 */
        transition: stroke-dashoffset 1s, stroke 0s;
      }
      .svg-cab:hover .cls-21 {
        stroke: white;
        stroke-dashoffset: 0;
      }
      .svg-cab:not(:hover) .cls-21 {
        stroke-dashoffset: 1000;
        stroke: none;
        /* 鼠标移出时延迟重置，让描边多停留一下（可选） */
        transition-delay: 0s;
      }
    </style>
  </defs>
  <path class="cls-21" d="M277.3,192.9a53.3,53.3,0,1,1-51.6-51.5A53.3,53.3,0,0,1,277.3,192.9Z" transform="translate(-123 -136.3)"/>
  <path class="cls-21" d="M269.3,264H178.7A50.7,50.7,0,0,0,128,314.7V352a8,8,0,0,0,8,8H312a8,8,0,0,0,8-8V314.7A50.7,50.7,0,0,0,269.3,264Z" transform="translate(-123 -136.3)"/>
</svg>

这个方案利用transition的过渡效果，当hover时把stroke-dashoffset从1000过渡到0，实现描边动画，鼠标移出时再过渡回去，同样能达到你要的效果。

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