Html 使用jQuery添加类后SVG屏蔽消失

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

.pen{
填充：无；
行程：#c1995a；
笔画宽度：20；
笔划线头：圆形；
动画名称：draw；
动画持续时间：3s；
笔划阵列：1000；
笔划偏移：0；
动画计时功能：线性；
}
.st1{剪辑路径：url（#fallwinter）；}
@关键帧绘制{
0% {
行程偏移量：1000；
}
100% {
笔划偏移：0；
}
}

---

尝试在

mouseenter

上添加一个类，该类将动画CSS应用于元素：

$（'div.touch'）.mouseenter（函数（）{
$（'svg.pen.st1'）.addClass（'start'）；
});
.pen{
填充：无；
行程：#c1995a；
笔画宽度：20；
笔划线头：圆形；
笔划阵列：1000；
笔划偏移：0；
}
.开始{
动画名称：draw；
动画持续时间：3s；
动画计时功能：线性；
}
.st1{
剪辑路径：url（#fallwinter）；
}
@关键帧绘制{
0% {
行程偏移量：1000；
}
100% {
笔划偏移：0；
}
}

str1！=st1这只是一个打字错误，太可耻了。我一直在检查问题所在，感谢您指出一个观察：您使用的是
stroke dashoffset:1000-太大了。设置动画的路径长度为426.5。您可以使用
getTotalLength（）
方法获取此值。2.我将使用
stroke dashoffset:426.5的初始值而不是笔划dashoffset:0@谢谢你的通知：）现在我知道了。实际上我还有很多其他的角色