使用 jQuery 添加类后 SVG 遮罩消失

问题描述

这就是我制作 SVG 动画的方式

onStop

.pen {
  fill: none;
  stroke: #c1995a;
  stroke-width: 20;
  stroke-linecap: round;
  animation-name: draw;
  animation-duration: 3s;
  stroke-dasharray: 1000 1000;
  stroke-dashoffset: 0;
  animation-timing-function: linear;
}


.st1{clip-path:url(#fallwinter);}

@keyframes draw {
  0% {
    stroke-dashoffset: 1000;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

它正在工作，但我想要的是在鼠标悬停在文本上后播放 SVG。所以我添加了一个 jQuery 来添加类。

<svg viewBox="0 0 739.3 215">
<defs>
<clipPath id="fallwinter">
<path id="fall-f" d="M76.4,107.6c-0.7,1.5-1.4,3-2,4.5c-0.6,1.5-1.3,3-1.9,4.5c3.4,0.6,7,0.9,10.8,1c3.8,0.1,7.5-0.4,11.1-1.5
    c3.6-1.1,7-2.8,10.2-5.2c3.2-2.4,5.9-5.8,8.1-10.2c0.3-0.5,0.6-0.8,1.1-0.8c0.5,0.2,1.4,0.5c0.4,0.3,0.8,1,1.1
    c0.3,0.4,0.7,0.9c-1.9,4.1-4.2,7.4-6.9,10c-2.7,2.6-5.5,4.7-8.6,6.3c-3,1.6-6.1,2.7-9.2,3.3c-3.1,0.7-6,1.1-8.8,1.2
    c-2.8,0.1-5.3,0.1-7.6-0.1s-4-0.5-5.3-0.7l-0.7,1.5c1.4,2.1,2.5,4.7,3.4,7.8c0.9,3.1,1.6,6.5,2,10.1c0.4,3.6,7.4,11.3
    c-0.1,3.9-0.4,7.7-1,11.4c-0.6,3.7-1.4,7.2-2.5,10.4c-1.1,3.2-2.4,6-4.1,8.4c-1.6,2.3-3.5,4.1-5.7,5.2c-2.2,1.1-4.6,1.5-7.3,1
    c-0.8-0.1-1.7-0.5-2.6-1.1c-0.9-0.6-1.7-1.3-2.5-2.3c-0.8-1-1.4-2.2-2-3.6s-0.9-3-1.1-4.8c-0.4-3.3-0.4-7.1,0-11.5
    c0.4-4.4,1.2-9.2,2.2-14.4c1-5.2,2.3-10.6,3.9-16.2c1.5-5.7,3.2-11.4,5.1-17.2c-1.6-0.8-3.2-1.5-5-1.9c-0.8-0.1-1.3-0.6-1.6-1.3
    c-0.3-0.7-0.4-1.4-0.2-2.1c0.1-0.7,0.5-1.3,1-1.7c0.6-0.5,1.3-0.5,2.3-0.2c0.1,0.6c0.9,3.5,1.4
    l3.7-11.2l1.7-4.8c-1.2-1.1-2.1-2.1-2.8-3c-0.7-0.9-1.1-1.6-1.2-2.1c-0.4-1.3-0.6-2.2-0.6-2.8c0-0.5,0.4-0.6,1.2-0.4
    c0.3,1.7,1.4c0.8,1.8,3.2,3c2.5-6.5,5.3-12.6,8.2-18.5c3-5.9,6-11.1,9.3-15.6c3.2-4.5,6.5-8.1,9.8-10.8
    c3.3-2.7,6.6-4.1,9.9-4.3c2.7-0.2,4.8,6.4,1.2c1.5,2.7,2.4,4c0.8,1.2,1.5,5.6c0.2,4.1,6
    c0.1,4-0.4,7.8-1.5,11.4c-1,3.6-2.4,7.1-4.2,10.2c-1.8,3.2-3.8,6.1-6.1,8.7c-2.3,2.6-4.7,4.9-7.2,6.7c-2.5,1.9-4.9,3.3-7.4,4.3
    c-2.5,1-4.7,1.6-6.7,1.6c-1.5,0-2.8,0-4.2-0.2c-0.3,0.7-0.6,1.3-0.9,1.9C77,106.3,76.7,106.9,76.4,107.6z M59.7,183.3
    c1.5,2.9,4.3-1.2c1.4-1.4,2.6-3.6,3.7-6.4c1.1-2.8,2-6.2,2.6-10c0.7-3.9,1.1-7.9,1.2-12.1c0.1-4.2-0.2-8.4-0.8-12.5
    c-0.6-4.2-1.7-8-3.2-11.5c-2.5,6.6-4.6,13-6.3,19.2c-1.7,6.1-3,11.6-3.8,16.5c-0.8,4.9-1.1,8.9-0.7,12.1
    C57,180.5,58,182.5,59.7,183.3z M107.7,53.5c-0.7,0.1-2,1.5-3.8,3.9c-1.9,2.5-4.1,5.8-6.6,10s-5.3,9-8.4,14.5s-6,11.3-8.9,17.5
    h1.3c2.6-0.1,5.2-0.8,7.7-2.2c2.5-1.4,4.8-3.2,7-5.4c2.2-2.2,4.2-4.7,6.1-7.5c1.9-2.8,3.4-5.6,4.8-8.5c1.3-2.9,2.4-5.6,3.1-8.3
    c0.8-2.7,1.2-5.1,1.2-7.1c0-1-0.1-2-0.3-2.8c-0.2-0.9-0.5-1.6-0.9-2.2c-0.4-0.6-0.8-1.1-1.2-1.4C108.5,53.6,108.1,53.5,107.7,53.5
    z"/>
</clipPath>
</defs>

    
<!-- Fall mask -->
<path class="pen st1" d="M60.4,89.3c0,14,22.8,29.3,10.2s19.3-19.8,20.2-23s7.4-24.5,1.4-27.2c-6-2.8-9.7-2.1-19.5,11.5
    s-37.1,83-37.1,83s-10.3,35.9-2.5,39.9c7.8,4,13.8,1.9,14.7-1.1c0.9-3,13.1-39.4,3.7-52.9s-19.3-16.4-19.3-16.4s34.1,14.6,44.5,5.9
    s18.6-8.3,23.6-19.5"/>
</svg>

$(document).on({
        mouseenter: function () {
            
            $('svg').find('path').attr("class","pen str1");
        }
    },".touch a");

.pen {
  fill: none;
  stroke: #c1995a;
  stroke-width: 20;
  stroke-linecap: round;
  animation-name: draw;
  animation-duration: 3s;
  stroke-dasharray: 1000 1000;
  stroke-dashoffset: 0;
  animation-timing-function: linear;
}


.st1{clip-path:url(#fallwinter);}

@keyframes draw {
  0% {
    stroke-dashoffset: 1000;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

类添加成功，但是屏蔽消失了。鼠标悬停后如何恢复正常？还是我的方法不对？请给我建议一个使用路径和蒙版鼠标悬停和播放SVG动画的好方法

这是我第一次制作SVG动画，希望大家多多指教。谢谢！

解决方法

尝试在 mouseenter 上添加一个类，它将动画 CSS 应用于元素：

$('div.touch').mouseenter(function() {
  $('svg .pen.st1').addClass('start');
});

.pen {
  fill: none;
  stroke: #c1995a;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 1000 1000;
  stroke-dashoffset: 0;
}

.start {
  animation-name: draw;
  animation-duration: 3s;
  animation-timing-function: linear;
}

.st1 {
  clip-path: url(#fallwinter);
}

@keyframes draw {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="touch"><a href="#">Hover</a></div>
<svg viewBox="0 0 739.3 215">
<defs>
<clipPath id="fallwinter">
<path id="fall-f" d="M76.4,107.6c-0.7,1.5-1.4,3-2,4.5c-0.6,1.5-1.3,3-1.9,4.5c3.4,0.6,7,0.9,10.8,1c3.8,0.1,7.5-0.4,11.1-1.5
    c3.6-1.1,7-2.8,10.2-5.2c3.2-2.4,5.9-5.8,8.1-10.2c0.3-0.5,0.6-0.8,1.1-0.8c0.5,0.2,1.4,0.5c0.4,0.3,0.8,1,1.1
    c0.3,0.4,0.7,0.9c-1.9,4.1-4.2,7.4-6.9,10c-2.7,2.6-5.5,4.7-8.6,6.3c-3,1.6-6.1,2.7-9.2,3.3c-3.1,0.7-6,1.1-8.8,1.2
    c-2.8,0.1-5.3,0.1-7.6-0.1s-4-0.5-5.3-0.7l-0.7,1.5c1.4,2.1,2.5,4.7,3.4,7.8c0.9,3.1,1.6,6.5,2,10.1c0.4,3.6,7.4,11.3
    c-0.1,3.9-0.4,7.7-1,11.4c-0.6,3.7-1.4,7.2-2.5,10.4c-1.1,3.2-2.4,6-4.1,8.4c-1.6,2.3-3.5,4.1-5.7,5.2c-2.2,1.1-4.6,1.5-7.3,1
    c-0.8-0.1-1.7-0.5-2.6-1.1c-0.9-0.6-1.7-1.3-2.5-2.3c-0.8-1-1.4-2.2-2-3.6s-0.9-3-1.1-4.8c-0.4-3.3-0.4-7.1,0-11.5
    c0.4-4.4,1.2-9.2,2.2-14.4c1-5.2,2.3-10.6,3.9-16.2c1.5-5.7,3.2-11.4,5.1-17.2c-1.6-0.8-3.2-1.5-5-1.9c-0.8-0.1-1.3-0.6-1.6-1.3
    c-0.3-0.7-0.4-1.4-0.2-2.1c0.1-0.7,0.5-1.3,1-1.7c0.6-0.5,1.3-0.5,2.3-0.2c0.1,0.6c0.9,3.5,1.4
    l3.7-11.2l1.7-4.8c-1.2-1.1-2.1-2.1-2.8-3c-0.7-0.9-1.1-1.6-1.2-2.1c-0.4-1.3-0.6-2.2-0.6-2.8c0-0.5,0.4-0.6,1.2-0.4
    c0.3,1.7,1.4c0.8,1.8,3.2,3c2.5-6.5,5.3-12.6,8.2-18.5c3-5.9,6-11.1,9.3-15.6c3.2-4.5,6.5-8.1,9.8-10.8
    c3.3-2.7,6.6-4.1,9.9-4.3c2.7-0.2,4.8,6.4,1.2c1.5,2.7,2.4,4c0.8,1.2,1.5,5.6c0.2,4.1,6
    c0.1,4-0.4,7.8-1.5,11.4c-1,3.6-2.4,7.1-4.2,10.2c-1.8,3.2-3.8,6.1-6.1,8.7c-2.3,2.6-4.7,4.9-7.2,6.7c-2.5,1.9-4.9,3.3-7.4,4.3
    c-2.5,1-4.7,1.6-6.7,1.6c-1.5,0-2.8,0-4.2-0.2c-0.3,0.7-0.6,1.3-0.9,1.9C77,106.3,76.7,106.9,76.4,107.6z M59.7,183.3
    c1.5,2.9,4.3-1.2c1.4-1.4,2.6-3.6,3.7-6.4c1.1-2.8,2-6.2,2.6-10c0.7-3.9,1.1-7.9,1.2-12.1c0.1-4.2-0.2-8.4-0.8-12.5
    c-0.6-4.2-1.7-8-3.2-11.5c-2.5,6.6-4.6,13-6.3,19.2c-1.7,6.1-3,11.6-3.8,16.5c-0.8,4.9-1.1,8.9-0.7,12.1
    C57,180.5,58,182.5,59.7,183.3z M107.7,53.5c-0.7,0.1-2,1.5-3.8,3.9c-1.9,2.5-4.1,5.8-6.6,10s-5.3,9-8.4,14.5s-6,11.3-8.9,17.5
    h1.3c2.6-0.1,5.2-0.8,7.7-2.2c2.5-1.4,4.8-3.2,7-5.4c2.2-2.2,4.2-4.7,6.1-7.5c1.9-2.8,3.4-5.6,4.8-8.5c1.3-2.9,2.4-5.6,3.1-8.3
    c0.8-2.7,1.2-5.1,1.2-7.1c0-1-0.1-2-0.3-2.8c-0.2-0.9-0.5-1.6-0.9-2.2c-0.4-0.6-0.8-1.1-1.2-1.4C108.5,53.6,108.1,53.5,107.7,53.5
    z"/>
</clipPath>
</defs>

    
<!-- Fall mask -->
<path class="pen st1" d="M60.4,89.3c0,14,22.8,29.3,10.2s19.3-19.8,20.2-23s7.4-24.5,1.4-27.2c-6-2.8-9.7-2.1-19.5,11.5
    s-37.1,83-37.1,83s-10.3,35.9-2.5,39.9c7.8,4,13.8,1.9,14.7-1.1c0.9-3,13.1-39.4,3.7-52.9s-19.3-16.4-19.3-16.4s34.1,14.6,44.5,5.9
    s18.6-8.3,23.6-19.5"/>
</svg>